В свет вышел релиз 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(на момент написания) перед закрывающейся квадратной скобкой "]" следующий код:
Теперь необходимо в соответствии с языком добавить соответствующий перевод, открываем к примеру [ckeditor/lang/ru.js] и просто добавляем в конец файла
Сохраняем и вуаля — готово :)
В итоге при вставке изображения в закладке Ссылка(Link) появится выпадающий список:
И конечно для подключения незабудьте добавить соответствующие css/script в head.
Что касается работы lightbox, то тут два варианта, либо в вышеозначенном коде изменить работу на добавление именно rel="lightox", либо оригинальный код подправить немного, что я и выбрал, не хочется быть зависимым именно от lightbox, поэтому открываем lightbox.js(2.04) и меняем строку 191 на
(вижу что тоже самое :) так в оригинале было, не знаю с чем связано), строку 216 меняем на
Вот и всё, спёрто отсюда :)
Скачать измененные js:
ckeditor/plugins/image/dialogs/image.js
lightbox.js
Посмотреть можно здесь:
fancybox
lightbox
Нажмите кнопку [get html to look] для вывода из редактора
Я уже делал подобное совмещение(если это можно так назвать) для прошлой версии, для текущей подобное совсем не составляет труда.
Точнее, непосредственно при редактировании текста делать ссылку -> изображение для открытия без перезагрузки большого изображения, и для контент заполнителей было легко и интуитивно понятно.
Суть метода довольно проста, те кто подключал 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) появится выпадающий список:
И конечно для подключения незабудьте добавить соответствующие 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] для вывода из редактора