CKEditor + jquery.fancybox/prototype.lightbox or a simple version of the photo gallery
In light of the Release of CKEditor 3.0.1, that means it is necessary to add something :)
I have already made such a combination (if you can call it that) for the previous version, the current is not such a difficulty.
Specifically, direct editing of the text to make reference ->the image to open a large image without rebooting, and for aggregate content was easy and intuitive.
Essence of the method is quite simple, those who connects fancybox or lightbox know that it is necessary to link leading to the large image to add:
- To lightbox rel="lightbox"
- For fancybox no matter what, hard pegs him no, so at its discretion
Hence ckeditor need to add the ability to add the necessary attributes.
I decided to do the following, because I wanted more control of the situation thus:
- For single images in a class="" added to "gallery"
- For an array images a class="" added "gallerys" + and supplemented attribute rel="gallerys"
Add functional rather simple, does not take a packed file from [ckeditor/_source/plugins/image/dialogs/image.js] replace it with the appropriate in [ckeditor/plugins/..]
Open and add to the stock 990 (at the time of writing) before closing square bracket "]" the following code:
,{
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());
}
}
}
}
}
}
must now be in accordance with the language to add the appropriate translation, open for example [ckeditor/lang/en.js] and just add to end of file
CKEDITOR.lang.ru.gallery = (notSet: 'Do not use the gallery', single: 'Make a single discovery', many: 'Make a list of galleries');
save, and presto - you're done :)
As a result, when you insert the image in the tab Link (Link) will drop down list:
And of course for the connection do not forget to add the appropriate css/script in the head.
As of lightbox, then there are two options, either change the code for the above work is to add rel="lightbox", or tweak the original code a bit, which I chose, do not want to be dependent just on the lightbox, so open lightbox.js (2.04) and change line 191 to
var target = event.findElement('a[class^=gallery]') || event.findElement('a[class^=gallery]');
(see the same thing :) so the original was, I know not with what is connected), line 216 on my
if ((imageLink.rel! = 'gallerys')) (
That's all :)
Download changes js:
ckeditor/plugins/image/dialogs/image.js
ckeditor/lang/en.js
lightbox.js
Click [get html to look] for the withdrawal from the editor
для версии 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
Я по мере обнаружения новых версий стараюсь файлы сразу обновить, не всегда своевременно просто выходит, но этот файл в ближайшее время на врядли изменится мне кажется уже.
Да, вроде, прокатило. Доработал малость под себя, и всё ништяк :)