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

CKEditor + jquery.fancybox/prototype.lightbox или вариант простой фотогалереи

Время на прочтение 5 мин
Количество просмотров 3.4K
В свет вышел релиз CKEditor 3.0.1, значит надо что нибудь добавить :)
Я уже делал подобное совмещение(если это можно так назвать) для прошлой версии, для текущей подобное совсем не составляет труда.
Точнее, непосредственно при редактировании текста делать ссылку -> изображение для открытия без перезагрузки большого изображения, и для контент заполнителей было легко и интуитивно понятно.

Суть метода довольно проста, те кто подключал fancybox или lightbox знают, что необходимо к ссылке ведущей на большое изображение добавить:
— для lightbox rel="lightbox"
— для fancybox не важно что именно, жёсткой привязки у него нету, поэтому на своё усмотрение

Следовательно необходимо в ckeditor добавить возможность добавления необходимых атрибутов.
Я решил поступить следующим образом, так как хотелось больше контролировать ситуацию поэтому:
— для одиночных изображений в class="" добавляется "gallery"
— для массива изобаржений в class="" добавляется "gallerys" и + дополняется атрибутом rel="gallerys"

Добавить функционал довольно просто, берем не упакованный файл из [ckeditor/_source/plugins/image/dialogs/image.js] заменяем его на соответствующий в [ckeditor/plugins/..]
Открываем и добавляем на стоке 990(на момент написания) перед закрывающейся квадратной скобкой "]" следующий код:
,{<br/>    id : 'toGallery',<br/>    type : 'select',<br/>    'default' : '',<br/>    style: 'margin-top: 15px',<br/>    items :<br/>    [<br/>        [ editor.lang.gallery.notSet , ''],<br/>        [ editor.lang.gallery.single , 'gallery'],<br/>        [ editor.lang.gallery.many , 'gallerys'],<br/>    ],<br/>    setup : function( type, element ) {<br/>        if ( type == LINK ) {<br/>            var a = element.getAttribute('rel');<br/>            if (null == a) {<br/>                this.setValue(element.getAttribute('class'));<br/>            } else {<br/>                this.setValue(element.getAttribute('rel'));<br/>            }<br/>        }<br/>    },<br/>    commit : function(type, element) {<br/>        if (type == LINK) {<br/>            if ( this.getValue() || this.isChanged()) {<br/>                if ('gallery' == this.getValue()) {<br/>                    element.setAttribute('class', this.getValue());<br/>                    element.removeAttribute('rel');<br/>                } else {<br/>                    if ('' == this.getValue()) {<br/>                        element.removeAttribute('class', this.getValue());<br/>                        element.removeAttribute('rel', this.getValue());<br/>                    } else {<br/>                        element.setAttribute('class', this.getValue());<br/>                        element.setAttribute('rel', this.getValue());<br/>                    }<br/>                }<br/>            }<br/>        }<br/>    }<br/>} <br/>

Теперь необходимо в соответствии с языком добавить соответствующий перевод, открываем к примеру [ckeditor/lang/ru.js] и просто добавляем в конец файла
<br/>CKEDITOR.lang.ru.gallery = {notSet: 'Не использовать галерею', single: 'Сделать одиночное открытие', many: 'Сделать список галлерей'};

Сохраняем и вуаля — готово :)

В итоге при вставке изображения в закладке Ссылка(Link) появится выпадающий список:
ckeditor gallery
И конечно для подключения незабудьте добавить соответствующие css/script в head.
 
Что касается работы lightbox, то тут два варианта, либо в вышеозначенном коде изменить работу на добавление именно rel="lightox", либо оригинальный код подправить немного, что я и выбрал, не хочется быть зависимым именно от lightbox, поэтому открываем lightbox.js(2.04) и меняем строку 191 на
<br/>var target = event.findElement('a[class^=gallery]') || event.findElement('a[class^=gallery]'); <br/>

(вижу что тоже самое :) так в оригинале было, не знаю с чем связано), строку 216 меняем на
if ((imageLink.rel != 'gallerys')){

Вот и всё, спёрто отсюда :)

Скачать измененные js:
ckeditor/plugins/image/dialogs/image.js
lightbox.js

Посмотреть можно здесь:
fancybox

lightbox
Нажмите кнопку [get html to look] для вывода из редактора
Теги:
Хабы:
+5
Комментарии 2
Комментарии Комментарии 2

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн