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) появится выпадающий список:
ckeditor gallery

И конечно для подключения не забудьте добавить соответствующие 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

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

lightbox

graf, dp 23 Февраля 2010, 03:37
для версии CKEditor 3.1, я сделал по аналогии с 3.0.1,
превью создается, и можно его выбрать, но вот ссылку не полное изображение не вставляет. в чем может быть проблема?
graf, dp 23 Февраля 2010, 03:41
так же, я заметил, на демках, на всегда ссылки на превью вставляются
Demphest 25 Февраля 2010, 13:54
@graf
Только что попробовал на версии 3.1(4891), проблем не возникло.
А вы через какой браузер пробуете?
graf, dp 28 Февраля 2010, 18:25
Использовал оперу 10.2 и фаерфокс 3.6
1. Жму на иконку изображение
2. Жму просмотреть на сервере
3. Выбрал папку images
4. Создал в ней папку test
5. Жму зеленую кнопку choose file, выбираю файл у себя на компьютере
6. Жму на иконку загрузить выбранные файлы(зеленая стрелка вверх)
7. После загрузки, чтобы вставить тумблейт с превьюшкой, жмы в нижнем правом углу на иконку вставить это превью

Вставляется только изображение без ссылки
graf, dp 28 Февраля 2010, 18:28
делал все на демке
http://demphest.ru/demo/AjexFileManager/ckeditor-lightbox.html
graf, dp 1 Марта 2010, 14:24
может я неправильно понял, и для создания кликабельного тумблейта надо вручную выберть url в информации о изображении и в ссылке?

просто провожу интеграцию с одной cms и надо что превьшки со ссылками втавлялись через 1 клик
Demphest 1 Марта 2010, 23:58
@graf
Исправил ошибку в создании превьюшки, точнее права дал, после переноса оказывается доступ на запись забыл дать.
--
Для создания превьюшки-ссылка на большое изображение.
Вам необходимо в закладке изображение вставить превьюшку, а в закладке ссылка вставить большое изображение, и отметить использование галлереи. Т.е. сейчас полной автоматики на вставку сразу в два поля ссылок нету, это вручную надо делать.
graf, dp 4 Марта 2010, 11:20
вобщем спасибо и за то что уже есть.
интегрировал редактор и менеджеро с Next Generation CMS
http://ngcms.ru/forum/viewtopic.php?id=916

Но на будущее, я так понимаю, можно реализовать вставку такого кода
<a href ="image.jpg"><img src="thumb_image.jpg" alt ="" /></a>
из менеджера одной кнопкой?
di, Минск 22 Апреля 2010, 20:06
Подскажите, пожалуйста.
Друпаловский lightBox использует скрипт lightbox.js версии 1.5.2, где там править код?
Guest 22 Апреля 2010, 23:27
Сохраняем и вуаля - готово :)

В итоге при вставке изображения в закладке Ссылка(Link) появится выпадающий список:
Всё сделал по инструкции списка нет, ckeditor 3.2.1?
Guest 22 Апреля 2010, 23:38
// [ 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()
{
вот так сделал это правильно?
Demphest, где-то рядом 23 Апреля 2010, 00:57
>di
К сожалению друпал не разбирал, на текущий момент еще не ковырялся детально в нём, поэтому пока не знаю.

>Guest
В новой версии сместились необходимые строки, можете скачать измененный файл для версии 3.2.1
http://demphest.ru/demo/AjexFileManager/ckeditor/plugins/image/dialogs/image.js
Vladimir 23 Апреля 2010, 21:28
Спасибо Demphest у меня получилось под Друпал.
Смотрите на drupal.ru
Guest 23 Апреля 2010, 21:31
пример
http://webnovinki.com/drupal-ckeditor-lightbox2-0
melisa 6 Июня 2010, 09:19
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?
Demphest 8 Июня 2010, 00:50
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
DeeJay OuKay, Пермь 23 Июня 2010, 16:49
Уже вышла версия 3.3.1
В ней строки не смещались?
Demphest 24 Июня 2010, 02:14
@DeeJay
Если честно не знаю даже, я на автомате уже вставляю просто, визуально смотрю.
Можете скачать напрямую image.js по ссылке выше, она сейчас у версии 3.3.1
Я по мере обнаружения новых версий стараюсь файлы сразу обновить, не всегда своевременно просто выходит, но этот файл в ближайшее время на врядли изменится мне кажется уже.
DeeJay OuKay, Пермь 29 Июня 2010, 20:21
Да, вроде, прокатило. Доработал малость под себя, и всё ништяк :)
Оставить комментарий
Имя:
E-mail:
Город:
Пишите в ICQ или на E-mail
Как только буду On-Line сразу отвечу
Добро
Пожаловать
Меня зовут Александр, на своём сайте я собрал краткую информацию о себе, а также портфолио сделанных работ.

← Здесь я публикую свои мысли, идеи, реализации. В общем всякую ерунду и не только. Фактически использую как записную книжку.