Автоувеличение для FCKEditor + IMCE + Lightbox2
Решил облегчить жизнь модераторам сайта и сделал увеличение картинок для Lightbox2 с помощью 1 клика в FCKEditor.
В оригинале, чтобы поставить увеличение картинок в Lightbox2, нужно вставить картинку, а затем поставить на неё ссылку на нужную нам картинку, это мне показалось доволно неудобным.
Одно из решений есть здесь - http://drupal.org/node/314566, но меня оно не устроило, т.к. хочется все-таки выбирать какие картинки надо увеличивать, а какие не надо.
Что есть:
Drupal 6.10
IMCE 6.x-1.1
Lightbox2 6.x-1.9
FCKEditor 2.6.3 (работает и в FCKEditor 2.6.4)
Что будет делать скрипт: при установке чекбокса "Автоувеличение" на картинку будет ставиться ссылка, которая ведет на файл без суффикса, т.е. на оригинальный файл. Картинки с предпросмотром создаются через IMCE. Необходимо оставлять исходный файл. Также ставится свойство класса на картинку, по которому Lightbox2 знает, что эту картинку надо открывать ему. В тэг a автоматом ставится rel, что нужно для показа всех картинок на странице по порядку в Lightbox2.
Что сделал:
1. Настроил IMCE - проставил настройки для Thumbnail с суффиксами "_small" и "_medium".
2. Настроил Lightbox2 - в качестве "Custom Class Images" прописал "lb2".
3. Настройка FCKEditor:
в /fckeditor/editor/dialog/fck_image.html добавил чекбокс для управления:
<td nowrap="nowrap">
<span fcklang="DlgImgAlign">Align</span> </td>
<td>
<select id="cmbAlign" onchange="UpdatePreview();">
<option value="" selected="selected"></option>
<option fcklang="DlgImgAlignLeft" value="left">Left</option>
<option fcklang="DlgImgAlignAbsBottom" value="absBottom">Abs Bottom</option>
<option fcklang="DlgImgAlignAbsMiddle" value="absMiddle">Abs Middle</option>
<option fcklang="DlgImgAlignBaseline" value="baseline">Baseline</option>
<option fcklang="DlgImgAlignBottom" value="bottom">Bottom</option>
<option fcklang="DlgImgAlignMiddle" value="middle">Middle</option>
<option fcklang="DlgImgAlignRight" value="right">Right</option>
<option fcklang="DlgImgAlignTextTop" value="textTop">Text Top</option>
<option fcklang="DlgImgAlignTop" value="top">Top</option>
</select>
</td>
</tr>
<!-- Добавление вот здесь -->
<tr>
<td>
Автоувеличение
</td>
<td>
<input type="checkbox" id="checkFullSize" name="fullsize">
</td>
</tr>
<!-- Закончилось добавление -->
в /fckeditor/editor/dialog/fck_image/fck_image.js в начало добавил
var arrThumb = Array ('_0','_thumb','_small','_medium'); //суффиксы, настроенные в IMCE
//вырезаем подстроку - не нашел функцию в FCKEditor для вырезания строки, поэтому добавил свою.
function str_replace(search, replace, subject) {
return subject.split(search).join(replace);
}
изменил функции
{
if ( ! oImage ) return ;
var sUrl = oImage.getAttribute( '_fcksavedurl' ) ;
if ( sUrl == null )
sUrl = GetAttribute( oImage, 'src', '' ) ;
GetE('txtUrl').value = sUrl ;
GetE('txtAlt').value = GetAttribute( oImage, 'alt', '' ) ;
GetE('txtVSpace').value = GetAttribute( oImage, 'vspace', '' ) ;
GetE('txtHSpace').value = GetAttribute( oImage, 'hspace', '' ) ;
GetE('txtBorder').value = GetAttribute( oImage, 'border', '' ) ;
GetE('cmbAlign').value = GetAttribute( oImage, 'align', '' ) ;
var iWidth, iHeight ;
var regexSize = /^\s*(\d+)px\s*$/i ;
if ( oImage.style.width )
{
var aMatchW = oImage.style.width.match( regexSize ) ;
if ( aMatchW )
{
iWidth = aMatchW[1] ;
oImage.style.width = '' ;
SetAttribute( oImage, 'width' , iWidth ) ;
}
}
if ( oImage.style.height )
{
var aMatchH = oImage.style.height.match( regexSize ) ;
if ( aMatchH )
{
iHeight = aMatchH[1] ;
oImage.style.height = '' ;
SetAttribute( oImage, 'height', iHeight ) ;
}
}
GetE('txtWidth').value = iWidth ? iWidth : GetAttribute( oImage, "width", '' ) ;
GetE('txtHeight').value = iHeight ? iHeight : GetAttribute( oImage, "height", '' ) ;
// Get Advances Attributes
GetE('txtAttId').value = oImage.id ;
GetE('cmbAttLangDir').value = oImage.dir ;
GetE('txtAttLangCode').value = oImage.lang ;
GetE('txtAttTitle').value = oImage.title ;
GetE('txtLongDesc').value = oImage.longDesc ;
if ( oEditor.FCKBrowserInfo.IsIE )
{
GetE('txtAttClasses').value = oImage.className || '' ;
GetE('txtAttStyle').value = oImage.style.cssText ;
} else
{
GetE('txtAttClasses').value = oImage.getAttribute('class',2) || '' ;
GetE('txtAttStyle').value = oImage.getAttribute('style',2) ;
}
//определяем стоит ли автоувеличение, если да, то переключаем чекбокс
if (GetE('txtAttClasses').value.search(ImageClassBig) != -1)
{
GetE('checkFullSize').checked = true; //if ImageClassBig have been found
}
if ( oLink )
{
var sLinkUrl = oLink.getAttribute( '_fcksavedurl' ) ;
if ( sLinkUrl == null )
sLinkUrl = oLink.getAttribute('href',2) ;
GetE('txtLnkUrl').value = sLinkUrl ;
GetE('cmbLnkTarget').value = oLink.target ;
}
UpdatePreview() ;
}
function Ok()
{
if ( GetE('txtUrl').value.length == 0 )
{
dialog.SetSelectedTab( 'Info' ) ;
GetE('txtUrl').focus() ;
alert( FCKLang.DlgImgAlertUrl ) ;
return false ;
}
var bHasImage = ( oImage != null ) ;
if ( bHasImage && bImageButton && oImage.tagName == 'IMG' )
{
if ( confirm( 'Do you want to transform the selected image on a image button?' ) )
oImage = null ;
}
else if ( bHasImage && !bImageButton && oImage.tagName == 'INPUT' )
{
if ( confirm( 'Do you want to transform the selected image button on a simple image?' ) )
oImage = null ;
}
oEditor.FCKUndo.SaveUndoStep() ;
if ( !bHasImage )
{
if ( bImageButton )
{
oImage = FCK.EditorDocument.createElement( 'input' ) ;
oImage.type = 'image' ;
oImage = FCK.InsertElement( oImage ) ;
}
else
oImage = FCK.InsertElement( 'img' ) ;
}
UpdateImage( oImage ) ;
//вот здесь автоматически устанавливается ссылка
var sLnkUrl = '';
if (GetE('checkFullSize').checked==true)
{
sLnkUrl = GetE('txtUrl').value;
for (var i=0; i < arrThumb.length; i++ )
{
sLnkUrl = str_replace(arrThumb[i],'',sLnkUrl);
}
} else
{
sLnkUrl = '';
}
if ( sLnkUrl.length == 0 )
{
if ( oLink )
FCK.ExecuteNamedCommand( 'Unlink' ) ;
}
else
{
if ( oLink ) // Modifying an existent link.
oLink.href = sLnkUrl ;
else // Creating a new link.
{
if ( !bHasImage )
oEditor.FCKSelection.SelectNode( oImage ) ;
oLink = oEditor.FCK.CreateLink( sLnkUrl )[0] ;
if ( !bHasImage )
{
oEditor.FCKSelection.SelectNode( oLink ) ;
oEditor.FCKSelection.Collapse( false ) ;
}
}
SetAttribute( oLink, 'rel', ImageClassBig + '[node]' ) ;
SetAttribute( oLink, '_fcksavedurl', sLnkUrl ) ;
SetAttribute( oLink, 'target', GetE('cmbLnkTarget').value ) ;
}
return true ;
}
function UpdateImage( e, skipId )
{
e.src = GetE('txtUrl').value ;
SetAttribute( e, "_fcksavedurl", GetE('txtUrl').value ) ;
SetAttribute( e, "alt" , GetE('txtAlt').value ) ;
SetAttribute( e, "width" , GetE('txtWidth').value ) ;
SetAttribute( e, "height", GetE('txtHeight').value ) ;
SetAttribute( e, "vspace", GetE('txtVSpace').value ) ;
SetAttribute( e, "hspace", GetE('txtHSpace').value ) ;
SetAttribute( e, "border", GetE('txtBorder').value ) ;
SetAttribute( e, "align" , GetE('cmbAlign').value ) ;
///////////////////////////////////////////////////////////////////////
// Advances Attributes
if ( ! skipId )
SetAttribute( e, 'id', GetE('txtAttId').value ) ;
SetAttribute( e, 'dir' , GetE('cmbAttLangDir').value ) ;
SetAttribute( e, 'lang' , GetE('txtAttLangCode').value ) ;
SetAttribute( e, 'title' , GetE('txtAttTitle').value ) ;
SetAttribute( e, 'longDesc' , GetE('txtLongDesc').value ) ;
//Get class name for image
//здесь автоматически проставляем класс в изображение
var ImageClassName='';
if (GetE('checkFullSize').checked==true)
{
if (GetE('txtAttClasses').value.length)
{
if (GetE('txtAttClasses').value.search(ImageClassBig) == -1)
{
ImageClassName = ImageClassBig + ' ' + GetE('txtAttClasses').value;
} else
{
ImageClassName = GetE('txtAttClasses').value;
}
} else
{
ImageClassName = ImageClassBig;
}
} else
{
ImageClassName = str_replace(ImageClassBig,'',GetE('txtAttClasses').value);
}
if ( oEditor.FCKBrowserInfo.IsIE )
{
e.className = ImageClassName ;
e.style.cssText = GetE('txtAttStyle').value ;
}
else
{
SetAttribute( e, 'class', ImageClassName ) ;
SetAttribute( e, 'style', GetE('txtAttStyle').value ) ;
}
}
В прикрепленном файле все исходники.
Обсуждение на drupal.ru - http://www.drupal.ru/node/26272

Комментарии
Оставить сообщение