CKEditor + jquery.fancybox/prototype.lightbox или вариант простой фотогалереи
В свет вышел релиз 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(на момент написания) перед закрывающейся квадратной скобкой "]" следующий код:
,{
id : 'toGallery',
type : 'select',
'default' : '',
style: 'margin-top: 15px',
items :
[
[ editor.lang.gallery.notSet , ''],
[ editor.lang.gallery.single , 'gallery'],
[ editor.lang.gallery.many , 'gallerys'],
],
setup : function( type, element ) {
if ( type == LINK ) {
var a = element.getAttribute('rel');
if (null == a) {
this.setValue(element.getAttribute('class'));
} else {
this.setValue(element.getAttribute('rel'));
}
}
},
commit : function(type, element) {
if (type == LINK) {
if ( this.getValue() || this.isChanged()) {
if ('gallery' == this.getValue()) {
element.setAttribute('class', this.getValue());
element.removeAttribute('rel');
} else {
if ('' == this.getValue()) {
element.removeAttribute('class', this.getValue());
element.removeAttribute('rel', this.getValue());
} else {
element.setAttribute('class', this.getValue());
element.setAttribute('rel', this.getValue());
}
}
}
}
}
}
Теперь необходимо в соответствии с языком добавить соответствующий перевод, открываем к примеру [ckeditor/lang/ru.js] и просто добавляем в конец файла
CKEDITOR.lang.ru.gallery = {notSet: 'Не использовать галерею', single: 'Сделать одиночное открытие', many: 'Сделать список галлерей'};
Сохраняем и вуаля - готово :)
В итоге при вставке изображения в закладке Ссылка(Link) появится выпадающий список:
И конечно для подключения не забудьте добавить соответствующие css/script в head.
Что касается работы lightbox, то тут два варианта, либо в вышеозначенном коде изменить работу на добавление именно rel="lightox", либо оригинальный код подправить немного, что я и выбрал, не хочется быть зависимым именно от lightbox, поэтому открываем lightbox.js(2.04) и меняем строку 191 на
var target = event.findElement('a[class^=gallery]') || event.findElement('a[class^=gallery]');
(вижу что тоже самое :) так в оригинале было, не знаю с чем связано), строку 216 меняем на
if ((imageLink.rel != 'gallerys')){
Вот и всё :)
Скачать измененные js:
ckeditor/plugins/image/dialogs/image.js
lightbox.js
для версии CKEditor 3.1, я сделал по аналогии с 3.0.1,
превью создается, и можно его выбрать, но вот ссылку не полное изображение не вставляет. в чем может быть проблема?
так же, я заметил, на демках, на всегда ссылки на превью вставляются
@graf
Только что попробовал на версии 3.1(4891), проблем не возникло.
А вы через какой браузер пробуете?
Использовал оперу 10.2 и фаерфокс 3.6
1. Жму на иконку изображение
2. Жму просмотреть на сервере
3. Выбрал папку images
4. Создал в ней папку test
5. Жму зеленую кнопку choose file, выбираю файл у себя на компьютере
6. Жму на иконку загрузить выбранные файлы(зеленая стрелка вверх)
7. После загрузки, чтобы вставить тумблейт с превьюшкой, жмы в нижнем правом углу на иконку вставить это превью
Вставляется только изображение без ссылки
делал все на демке
http://demphest.ru/demo/AjexFileManager/ckeditor-lightbox.html
может я неправильно понял, и для создания кликабельного тумблейта надо вручную выберть url в информации о изображении и в ссылке?
просто провожу интеграцию с одной cms и надо что превьшки со ссылками втавлялись через 1 клик
@graf
Исправил ошибку в создании превьюшки, точнее права дал, после переноса оказывается доступ на запись забыл дать.
--
Для создания превьюшки-ссылка на большое изображение.
Вам необходимо в закладке изображение вставить превьюшку, а в закладке ссылка вставить большое изображение, и отметить использование галлереи. Т.е. сейчас полной автоматики на вставку сразу в два поля ссылок нету, это вручную надо делать.
вобщем спасибо и за то что уже есть.
интегрировал редактор и менеджеро с Next Generation CMS
http://ngcms.ru/forum/viewtopic.php?id=916
Но на будущее, я так понимаю, можно реализовать вставку такого кода
<a href ="image.jpg"><img src="thumb_image.jpg" alt ="" /></a>
из менеджера одной кнопкой?
Подскажите, пожалуйста.
Друпаловский lightBox использует скрипт lightbox.js версии 1.5.2, где там править код?
Сохраняем и вуаля - готово :)
В итоге при вставке изображения в закладке Ссылка(Link) появится выпадающий список:
Всё сделал по инструкции списка нет, ckeditor 3.2.1?
// [ editor.lang.image.alignBottom , 'bottom'],
// [ editor.lang.image.alignMiddle , 'middle'],
// [ editor.lang.image.alignTop , 'top']
,{
id : 'toGallery',
type : 'select',
'default' : '',
style: 'margin-top: 15px',
items :
[
[ editor.lang.gallery.notSet , ''],
[ editor.lang.gallery.single , 'gallery'],
[ editor.lang.gallery.many , 'gallerys'],
],
setup : function( type, element ) {
if ( type == LINK ) {
var a = element.getAttribute('rel');
if (null == a) {
this.setValue(element.getAttribute('class'));
} else {
this.setValue(element.getAttribute('rel'));
}
}
},
commit : function(type, element) {
if (type == LINK) {
if ( this.getValue() || this.isChanged()) {
if ('gallery' == this.getValue()) {
element.setAttribute('class', this.getValue());
element.removeAttribute('rel');
} else {
if ('' == this.getValue()) {
element.removeAttribute('class', this.getValue());
element.removeAttribute('rel', this.getValue());
} else {
element.setAttribute('class', this.getValue());
element.setAttribute('rel', this.getValue());
}
}
}
}
}
}
],
onChange : function()
{
вот так сделал это правильно?
>di
К сожалению друпал не разбирал, на текущий момент еще не ковырялся детально в нём, поэтому пока не знаю.
>Guest
В новой версии сместились необходимые строки, можете скачать измененный файл для версии 3.2.1
http://demphest.ru/demo/AjexFileManager/ckeditor/plugins/image/dialogs/image.js
Спасибо Demphest у меня получилось под Друпал.
Смотрите на drupal.ru
пример
http://webnovinki.com/drupal-ckeditor-lightbox2-0
Hello, I tried to replace the image.js but it seems not working, the one that you replaced is image.js in the plugins folder right? not the _source folder?
Hi Melisa
The new version has shifted lines, just download the already modified file from the link above, they are for version CKEditor 3.3
Download changes js:
ckeditor/plugins/image/dialogs/image.js
ckeditor/lang/en.js
Уже вышла версия 3.3.1
В ней строки не смещались?
@DeeJay
Если честно не знаю даже, я на автомате уже вставляю просто, визуально смотрю.
Можете скачать напрямую image.js по ссылке выше, она сейчас у версии 3.3.1
Я по мере обнаружения новых версий стараюсь файлы сразу обновить, не всегда своевременно просто выходит, но этот файл в ближайшее время на врядли изменится мне кажется уже.
Да, вроде, прокатило. Доработал малость под себя, и всё ништяк :)