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
graf, dp 23 February 2010, 03:37
для версии CKEditor 3.1, я сделал по аналогии с 3.0.1,
превью создается, и можно его выбрать, но вот ссылку не полное изображение не вставляет. в чем может быть проблема?
graf, dp 23 February 2010, 03:41
так же, я заметил, на демках, на всегда ссылки на превью вставляются
Demphest 25 February 2010, 13:54
@graf
Только что попробовал на версии 3.1(4891), проблем не возникло.
А вы через какой браузер пробуете?
graf, dp 28 February 2010, 18:25
Использовал оперу 10.2 и фаерфокс 3.6
1. Жму на иконку изображение
2. Жму просмотреть на сервере
3. Выбрал папку images
4. Создал в ней папку test
5. Жму зеленую кнопку choose file, выбираю файл у себя на компьютере
6. Жму на иконку загрузить выбранные файлы(зеленая стрелка вверх)
7. После загрузки, чтобы вставить тумблейт с превьюшкой, жмы в нижнем правом углу на иконку вставить это превью
Вставляется только изображение без ссылки
graf, dp 28 February 2010, 18:28
делал все на демке
http://demphest.ru/demo/AjexFileManager/ckeditor-lightbox.html
graf, dp 1 March 2010, 14:24
может я неправильно понял, и для создания кликабельного тумблейта надо вручную выберть url в информации о изображении и в ссылке?
просто провожу интеграцию с одной cms и надо что превьшки со ссылками втавлялись через 1 клик
Demphest 1 March 2010, 23:58
@graf
Исправил ошибку в создании превьюшки, точнее права дал, после переноса оказывается доступ на запись забыл дать.
--
Для создания превьюшки-ссылка на большое изображение.
Вам необходимо в закладке изображение вставить превьюшку, а в закладке ссылка вставить большое изображение, и отметить использование галлереи. Т.е. сейчас полной автоматики на вставку сразу в два поля ссылок нету, это вручную надо делать.
graf, dp 4 March 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 April 2010, 20:06
Подскажите, пожалуйста.
Друпаловский lightBox использует скрипт lightbox.js версии 1.5.2, где там править код?
Guest 22 April 2010, 23:27
Сохраняем и вуаля - готово :)
В итоге при вставке изображения в закладке Ссылка(Link) появится выпадающий список:
Всё сделал по инструкции списка нет, ckeditor 3.2.1?
Guest 22 April 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 April 2010, 00:57
>di
К сожалению друпал не разбирал, на текущий момент еще не ковырялся детально в нём, поэтому пока не знаю.
>Guest
В новой версии сместились необходимые строки, можете скачать измененный файл для версии 3.2.1
http://demphest.ru/demo/AjexFileManager/ckeditor/plugins/image/dialogs/image.js
Vladimir 23 April 2010, 21:28
Спасибо Demphest у меня получилось под Друпал.
Смотрите на drupal.ru
Guest 23 April 2010, 21:31
пример
http://webnovinki.com/drupal-ckeditor-lightbox2-0
melisa 6 June 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 June 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 June 2010, 16:49
Уже вышла версия 3.3.1
В ней строки не смещались?
Demphest 24 June 2010, 02:14
@DeeJay
Если честно не знаю даже, я на автомате уже вставляю просто, визуально смотрю.
Можете скачать напрямую image.js по ссылке выше, она сейчас у версии 3.3.1
Я по мере обнаружения новых версий стараюсь файлы сразу обновить, не всегда своевременно просто выходит, но этот файл в ближайшее время на врядли изменится мне кажется уже.
DeeJay OuKay, Пермь 29 June 2010, 20:21
Да, вроде, прокатило. Доработал малость под себя, и всё ништяк :)
oksoft, Ростов-на-Дону 30 December 2010, 01:52
Эм... а можно попросить модифицировать image.js под ckeditor 3.5...
Demphest 31 December 2010, 10:23
@oksoft
Обновил image.js можете скачать по ссылке выше
oksoft, Ростов-на-Дону 2 January 2011, 02:02
Спасибо, заработало! Удачи в наступившем году!
Guest 15 March 2011, 20:44
а как быть с самой свежей версией скедитора?
Demphest 17 March 2011, 17:41
@Guest
Обновил файл image.js на версию 3.5.2, ссылка на него в конце поста.
Guest 30 March 2011, 23:57
Подскажите, а что значит: "И конечно для подключения не забудьте добавить соответствующие css/script в head"
Где?))
Demphest 31 March 2011, 03:39
@Guest
Непосредственно на самом сайте так сказать, т.е. они должны быть подключены на той странице, где происходит вывод текста - в котором есть соответствующие изображения.
Guest 3 April 2011, 21:11
Делаю все по описанию, скачал последнюю редакцию image.js, закинул ее в sites\all\modules\ckeditor\ckeditor\plugins\image\dialogs
drupal 7
ckeditor 3.5.2
Подскажите, в чем может быть проблема?
Demphest 5 April 2011, 22:39
@Guest
Наугад не скажу, js какую нибудь ошибку выдаёт?
Trash, Киев 27 April 2011, 14:54
Подскажите, как такое можно было бы реализовать с ASP.net контролом ckeditor-а? И как вы добились того, что можно загружать фотографии с локального компьютера на сервер? Что за компонент такой AjexFileManager? Спасибо!
Demphest 28 April 2011, 12:00
@Trash
AjexFileManager - самописный файл-браузер на php с загрузкой файлов.
Для ASP.net - необходимо как минимум написать загрузчик файлов, чтобы он принимал их со стороны ckeditor
Дамир 29 July 2011, 15:22
а как быть с ckeditor 3.6?
Дамир 29 July 2011, 15:24
Это я к тому, что поставил Djenx.Explorer 2.2.3 (beta) и хотел натянуть данную фотогаллерею а там ckeditor 3.6 - указанные действия ни к чему не приводят((((
whooly 1 August 2011, 14:06
Сделаете пожалуйста для версии CkEditor 3.6.1.
Demphest 4 August 2011, 02:10
Добавил в конец текста ссылку на архив ckeditor 3.6.1 с измененными JS файлами.
Холод, Ильичёвск 9 November 2011, 21:48
Уже 3.6.2 есть =)
Иван, Челябинск 14 November 2011, 21:30
а можете добавить такую же вещь только в редактор TinyMCE, буду очень признателен
blessed_man, Бишкек 17 November 2011, 10:11
Хорошее решение! спасибо!!!
Рамиль Абдрахимов, Оренбург 27 November 2011, 03:11
А вот с 3.6.2 вообще запары по жескому .
там даже если удалить полностью image.js то всё равно всё работает, там наверное подгрузка идёт слева откуда то .
Write comment
Name:
E-mail:
City: