Автоувеличение для 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 добавил чекбокс для управления:

<tr>
<td nowrap="nowrap">
<span fcklang="DlgImgAlign">Align</span>&nbsp;</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 ImageClassBig = 'lb2'; //определили какой у нас стиль настроен в Lightbox2
var arrThumb = Array ('_0','_thumb','_small','_medium'); //суффиксы, настроенные в IMCE

//вырезаем подстроку - не нашел функцию в FCKEditor для вырезания строки, поэтому добавил свою.
function str_replace(search, replace, subject) {
    return subject.split(search).join(replace);
}

изменил функции

function LoadSelection()
{
        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

Комментарии

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

Картинка