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: Картинка новая, но смысл тот же. Старая как-то затерялась)
В вашей статье нет последней картинки. Она очень необходима. За статью спасибо.
Картинку выложила свежую. Странно, старая куда-то исчезла. Вообще, не рекомендую так делать, очень геморно обновлять модули потом (((
спасибо
Pingback:CKEditor + IMCE + Colorbox. Добавление title к ссылке на изображение. | Заметки Айтишника