CKEditor + IMCE + Colorbox. Автоувеличение картинок.

Расскажу про связку CKEditor + IMCE + Colorbox и автоувеличение картинок, залитых в ckeditor через imce в Drupal 7.

На момент написания статьи тестирование производилось на следующих версиях:

Drupal core 7.7

модуль ckeditor 7.x-1.3 и сам редактор 3.6.1

colorbox 7.x-1.1

imce 7.x-1.4

Ну и еще у меня стоит imce_crop 7.x-1.0-beta2 и imce_mkdir 7.x-1.0-beta2.

Установка и настройка ckeditor + imce стандартна, много где описана. Про колорбокс тоже.
Все ставим, включаем.

Теперь добавляем возможность автоувеличения залитых через IMCE картинок.

Основывалась на статье с друпал ру. Вот она.
Итак:
1) Нам необходимо править файлик images.js. Берем его из ваш_сайт\www\sites\all\modules\ckeditor\ckeditor\_source\plugins\image\dialogs и копируем в ваш_сайт\www\sites\all\modules\ckeditor\ckeditor\plugins\image\dialogs.
2) Находим в нем строки:

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

и после них добавляем:

						},
						{ /*patch добавление всплывающей увеличенной картинки в редактор */
						    id : 'toGallery',
						    type : 'select',
						    'default' : '',
						    style: 'margin-top: 15px',
						    items :
						    [
						        [ editor.lang.gallery.notSet , ''],
						        //это для модуля colorbox. Соотвественно, для, например, модуля lightbox мы пишем
						       // [ editor.lang.gallery.single , 'lightbox'],
						       // [ editor.lang.gallery.many , 'lightbox'],
						       // ну и так далее
						        [ editor.lang.gallery.single , 'colorbox-load'],
						        [ editor.lang.gallery.many , 'colorbox-load-rel'],
						    ],
						    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 ('colorbox-load' == this.getValue()) {
//						                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', 'colorbox-load');
						                        //element.setAttribute('class', this.getValue());
						                        element.setAttribute('rel', this.getValue());
						                    }
						                }
						            }

						        }
						    }/*patch*/

3) Добавим перевод. В ваш_сайт\www\sites\all\modules\ckeditor\ckeditor\lang\ru.js добавим в конец строку:

CKEDITOR.lang.ru.gallery = {notSet: 'Не использовать галерею', single: 'Сделать одиночное открытие', many: 'Сделать список галерей'};

Ну и в en.js тоже:

CKEDITOR.lang.en.gallery = {notSet: 'Do not use the gallery', single: 'Make a single opening', many: 'Make a list of galleries'};

Скачать все 3 файла можно здесь:autogrow

Это для модуля colorbox. Соотвественно, для, например, модуля lightbox мы пишем:

 [ editor.lang.gallery.single , 'lightbox'],
 [ editor.lang.gallery.many , 'lightbox'],

, смотрите комменты в файле.

PS. В файлике image.js есть еще кое-какие изменения, а именно добавление title к ссылке на изображение. Title берется из тэга alt картинки. Это нужно, чтобы ототбражались подписи к картинке в колорбокс-окне. По идее, надо бы добавить поле title. Но поленилась. Кому не надо, просто найти кусок с комментами /*patch*/ и убрать нафиг)).

Про добавление title напишу в следующей статье.

В итоге при редактировании и добалении изображений, для автоувеличения в панели свойств изображения заходи на закладку "Свойства", там выбираем картинку (ту, что должна быть большой) и выбираем, как ее отображать (на картинке - Сделать одиночное открытие):

UPD: Картинка новая, но смысл тот же. Старая как-то затерялась)

Рекомендовать в Социальных сетях:
 

Комментариев 4 на “CKEditor + IMCE + Colorbox. Автоувеличение картинок.

    • Картинку выложила свежую. Странно, старая куда-то исчезла. Вообще, не рекомендую так делать, очень геморно обновлять модули потом (((

  1. Pingback: CKEditor + IMCE + Colorbox. Добавление title к ссылке на изображение. | Заметки Айтишника

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *