[Решено] CKEditor+Lightbox2

Главные вкладки

Аватар пользователя zmicer@drupal.org zmicer@drupal.org 22 апреля 2010 в 20:26

Установил 2 модуля и редактор, но не могу разобраться как заставить их работать вместе.

Нашел такой мануал:

http://demphest.ru/ru/javascript/ckeditor-fancybox-lightbox/

Все бы хорошо но не совпали версии скриптов lightbox.js у автора и у меня, и не могу понять куда внести последнее измение...

Помогите. пожалуйста.

Комментарии

Аватар пользователя vldmr vldmr 10 ноября 2015 в 11:46

Я не сильно разбираюсь в програмировании но это осилил, подправил код с сайта:
http://demphest.ru/ru/javascript/ckeditor-fancybox-lightbox/
Напортачил я там 100% главное работает.
Под Drupal+CKEditor+Lightbox2

вот пример:



Я использовал модули:
Lightbox2 6.x-1.9
CKEditor 6.x-1.0 - (6.x-1.1 - у меня не работает)
CKEditor 3.2.1 в нём заменить в папке sites\all\modules\ckeditor\ckeditor\lang ru.js
и в папке sites\all\modules\ckeditor\ckeditor\plugins\image\dialogs image.js
Очистить кеш. При уменьшенном изображении, сохранять в Full HTML
Правда добавляет изображение при просмотре которые находятся в данный момент на открытой страниче не из этого поста, а с другого, этого я не осилил.

Аватар пользователя zmicer@drupal.org zmicer@drupal.org 23 апреля 2010 в 16:28

спасибо)

но вчера разобрался сам. Просто закинул image.js в папку sites\all\modules\ckeditor\plugins\image\dialogs

и заработало без изменения скрипта лайтбокса. У автора скрипт не под друпал, а тут и дорабатывать не нужно.

Но всеравно спасибо за помощь. По установке данной связки не много информации, может и поможем кому)

Аватар пользователя vldmr vldmr 23 апреля 2010 в 16:37

я скрипт лайтбокса тоже неизменял только в этих двух файликах добавил и всё может специалисты по ява скриптах подправят, удобно ведь, пару счелчков и просмотр готов.

Аватар пользователя man-1982 man-1982 30 июля 2010 в 8:25

не знаю люди добрые как у вас работало, но у меня заработало только после того как заменил класс galery на класс lightbox в image.js. А классом 'gallerys' еще не разбирался... но думаю тоже можно что то дописать. Если кто подскажет буду благодарен.

Аватар пользователя alex-vv alex-vv 1 сентября 2010 в 14:19

Ничего из описанного здесь у меня не сработало. Видимо, для этой конфигурации решение устарело.
Lightbox2 6.x-1.9
модуль CKEditor 6.x-1.1
сам редактор CKEditor 3.4

Что ни делал, поле со списком галерей не появляется.
Может кто-нибудь подскажет решение?

Аватар пользователя _FeliX_ _FeliX_ 6 сентября 2010 в 14:42

"alex-vv" wrote:
Может кто-нибудь подскажет решение?

Решение есть нужно вставить этот код

,{
        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());
                                        }
                                }
                        }
                }
        }
}

в images.js только в другое место. у меня стоит версия CKEditor 3.4 и вставлять надо в блок Link
вот часть кода images.js уже со вставкой

        {
                                        id : 'Link',
                                        label : editor.lang.link.title,
                                        padding : 0,
                                        elements :
                                        [
                                                {
                                                        id : 'txtUrl',
                                                        type : 'text',
                                                        label : editor.lang.common.url,
                                                        style : 'width: 100%',
                                                        'default' : '',
                                                        setup : function( type, element )
                                                        {
                                                                if ( type == LINK )
                                                                {
                                                                        var href = element.getAttribute( '_cke_saved_href' );
                                                                        if ( !href )
                                                                                href = element.getAttribute( 'href' );
                                                                        this.setValue( href );
                                                                }
                                                        },
                                                        commit : function( type, element )
                                                        {
                                                                if ( type == LINK )
                                                                {
                                                                        if ( this.getValue() || this.isChanged() )
                                                                        {
                                                                                element.setAttribute( '_cke_saved_href', decodeURI( this.getValue() ) );
                                                                                element.setAttribute( 'href', 'javascript:void(0)/*' +
                                                                                        CKEDITOR.tools.getNextNumber() + '*/' );

                                                                                if ( this.getValue() || !editor.config.image_removeLinkByEmptyURL )
                                                                                        this.getDialog().addLink = true;
                                                                        }
                                                                }
                                                        }
                                                },
                                                {
                                                        type : 'button',
                                                        id : 'browse',
                                                        filebrowser :
                                                        {
                                                                action : 'Browse',
                                                                target: 'Link:txtUrl',
                                                                url: editor.config.filebrowserImageBrowseLinkUrl || editor.config.filebrowserBrowseUrl
                                                        },
                                                        style : 'float:right',
                                                        hidden : true,
                                                        label : editor.lang.common.browseServer
                                                },
                                                {
                                                        id : 'cmbTarget',
                                                        type : 'select',
                                                        label : editor.lang.common.target,
                                                        'default' : '',
                                                        items :
                                                        [
                                                                [ editor.lang.common.notSet , ''],
                                                                [ editor.lang.common.targetNew , '_blank'],
                                                                [ editor.lang.common.targetTop , '_top'],
                                                                [ editor.lang.common.targetSelf , '_self'],
                                                                [ editor.lang.common.targetParent , '_parent']
                                                        ],
                                                        setup : function( type, element )
                                                        {
                                                                if ( type == LINK )
                                                                        this.setValue( element.getAttribute( 'target' ) );
                                                        },
                                                        commit : function( type, element )
                                                        {
                                                                if ( type == LINK )
                                                                {
                                                                        if ( this.getValue() || this.isChanged() )
                                                                                element.setAttribute( 'target', this.getValue() );
                                                                }
                                                        }
                                                },
                                                {
                            id : 'toGallery',
                            type : 'select',
                            'default' : '',
                            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());
                                            }
                                        }
                                    }
                                }
                            }
                        }
                ]
        },

Если будут вопросы спрашивайте..

Аватар пользователя GDI@drupal.org GDI@drupal.org 9 декабря 2010 в 19:41

"_FeliX_" wrote:
Если будут вопросы спрашивайте..

Сделал всё по вашему описанию, всё работает прекрасно, но вот сейчас всплыла проблема, при работе из Линукса. ICEWeasel и Debian, не работает кнопка вставки изображения, в консоли ошибок ругается на строчку [ editor.lang.gallery.notSet , ''], пишет что editor.lang.gallery is undefined и дает ссылку на файл image.js. При работе из ФФ под Виндами подобной ошибки нет и все работает нормально. Не подскажете, в чем может быть проблема? Другие диалоги, например вставки Флеша, таблиц, при этом работают нормально и из Линукса. Т.е. не работает только измененный image.js. CKEditor 3.2.1. Кстати демка http://demphest.ru/demo/AjexFileManager/ckeditor-lightbox.html работает нормально из линукса, файл image.js я только что скачал оттуда и заменил тот что был у меня, но результат тот же. Не знаю даже, в какую сторону копать...

UPD. Нашел в чем проблема. В Линуксе почему то не происходит правильное определение языка и CKEditor загружает английский языковой файл в котором нет перевода для gallery. Солюшен - добавить строку с переводом в файл lang/en.js
CKEDITOR.lang.en.gallery = {notSet: 'Don`t use LightBox', single: 'Make single in LightBox', many: 'Make gallery in LightBox'};

Аватар пользователя oksoft oksoft 2 января 2011 в 22:21

Тоже немного помучился с настройкой. Моя последовательность действий следующая:
1) установил модули
wysiwyg (6.x-2.2)
imce (6.x-2.1)
imce_wysiwyg (6.x-1.1)
версии модулей на работу lightbox не влияют.
2) установил скрипты ckeditor (3.5) в sites/all/libraries/ckeditor
версия редактора важна, иначе связка работать не будет.
3) установил модуль Lightbox2 (6.x-1.11). Думаю версия модуля на работоспособность не повлияет, важно только то, что реагировать скрипт lightbox будет на атрибут ссылки rel="lightbox".

На этом этапе редактор позволяет вставить в документ картинку через imce и назначить для этой картинки ссылку. Ссылка должна вести на тот же файл картинки. При клике картинка загрузится в этом же окне, но без lightbox. Чтобы картинка при клике обрабатывалась скриптом lightbox, нужно перейти в исходный код документа, отыскать эту самую ссылку и добавить к ней атрибут rel="lightbox". Но вручную это делать лень, да и обычным пользователям сложно это объяснить, поэтому выполняем следующие шаги:

4)скачиваем с http://demphest.ru/ru/javascript/ckeditor-fancybox-lightbox/ измененный файлик ckeditor/plugins/image/dialogs/image.js (на страничке ссылка выделена оранжевым цветом) и помещаем его в каталог sites/all/libraries/ckeditor/plugins/image/dialogs с заменой существующего файла.
Здесь важно, чтобы этот измененный файл соответствовал версии редактора ckeditor, иначе работать не будет. Спасибо владельцу блога Demphest за оперативное обновление этого файлика! Этот измененный файл добавляет на вкладку "ссылки" диалога вставки картинок в документ дополнительный элемент select, позволяющий задать способ обработки клика по картинке:
1 вариант - обрабатывать без lightbox
2 вариант - обрабатывать в lightbox как одиночную картинку
3 вариант - обрабатывать в lightbox как серию картинок для слайдшоу.
Соответственно этому выбору скрипт добавляет (или не добавляет) нужные атрибуты к тегу ссылки.

5) Изменяем файл sites/all/libraries/ckeditor/lang/ru.js:
открываем файл в любом редакторе (который поддерживает UTF-8) и в самый конец файла добавляем строчку:
CKEDITOR.lang.ru.gallery = {notSet: 'Не использовать галерею', single: 'Сделать одиночное открытие', many: 'Сделать список галлерей'};
это задает названия вариантов обработки ссылки на картинку, русский текст можно изменить по вкусу.

До сих пор всё шло по методике, описанной в http://demphest.ru/ru/javascript/ckeditor-fancybox-lightbox/
Но сейчас в ссылку на картинку вставляется не атрибут rel="lightbox", а rel="gallery", и соответственно lightbox на него не реагирует. Demphest предлагает переделанный файл lightbox.js, но мне это не помогло. Поэтому по совету man-1982 файл image.js, переделанный Demphest`ом переделывается заменой строчки
[ editor.lang.gallery.single , 'gallery'],
на строку
[ editor.lang.gallery.single , 'lightbox'],

В этом случае при выборе 'Сделать одиночное открытие' в ссылку на картинку будет вставлен именно rel="lightbox" и изменять файл lightbox.js уже нет необходимости.
Не забыть очистить кеш в друпале и в браузере.

Надеюсь, кому-то этот мануал поможет.

Аватар пользователя Worth Worth 10 ноября 2015 в 11:47

oksoft,Спасибо, помогло!

Еще одна фича для CKEDitor и lightbox - мне понадобилось вставлять просто текстовые ссылки, но которые ссылаются на картинки, и чтобы они открывались тоже в lightbox'е.

Вот, для версии CKEDitor 3.5 я изменил файл link.js , теперь в форме добавления ссылки в закладке "Дополнительно" есть поле "Rel Attribute" - прописываете просто там lightbox[grouped] или как там вам надо

Файл не очень красивый внутри, но зато все работает Smile Пользуйтесь кому надо

Файл нужно засунуть в sites\all\modules\ckeditor\ckeditor\plugins\link\dialogs\ если что

Аватар пользователя Супрун Иван Супрун Иван 12 августа 2012 в 18:46

"_FeliX_" wrote:
Если будут вопросы спрашивайте..

У меня такая проблема, если я вставляю картинку и при этом значение стоит по умолчанию, то есть открытие через лайтбокс не выбрано то получаеться вот такой код

<a _cke_saved_href="/sites/default/files/imige/rastenievodstvo/seeds-4454_640.jpg" href="javascript:void(0)/*227*/"><img alt="" src="/sites/default/files/imige/rastenievodstvo/seeds-4454_640.jpg" /></a>

То есть ссылку на картинку поставил, а из за того что в коде javascript:void(0)/*227*/
ссылка не работает

Подскажите пожалуйста как исправить?

Аватар пользователя Супрун Иван Супрун Иван 17 августа 2012 в 18:38

"Супрун Иван" wrote:
У меня такая проблема

Скачал целиком редактор с вышеуказанной статьи http://demphest.ru/ru/javascript/ckeditor-fancybox-lightbox/ (огромная благодарность автору)

и сделал то что писал oksoft: заменить строчку
[ editor.lang.gallery.single , 'gallery'],
на строку
[ editor.lang.gallery.single , 'lightbox'],

И все работает прекрасно!!!

наверное лучше было бы сделать как писалось в статье, заменить файлик лайтбокс.js но не получилось, так как у меня версия лайтбокса 2.03 , в статье выложен файл для версии 2.04, а скачать сейчас можно только лайтбокс 2.51, вот такаявот дилема с версиями)))