О проекте

Данный сайт попытка повысить коммуникацию самых активных разработчиков на CMS Drupal - блоггеров. Если Вы ведете свой блог о Друпале, значит Вы готовы делиться вашими знаниями, помочь другим. Не всегда ваши знания доходят до потребителя. Задача данного сайта агрегировать знания различных блогов в единую ленту и привести на Ваши блоги активных пользователей.

Активность пользователей на Вашем сайте будет дополнительным стимулом к дальнейшей работе.

Удачи во всех Ваших начинаниях!

Настройка связки ColorBox + BUEditor + IMCE

-2 votes
+
-

Задача: настроить вставку изображений через wysiwyg-редактор. Изображения должны храниться локально и вставляться в статью в виде превью. Клик по превью должен открывать оригинальное изображение. Превью должны формироваться автоматически.
Решение
Нам понадобятся следующие модули:

  • BUEditor (wysiwyg-редактор)
  • ColorBox (показ изображений)
  • IMCE (закачка изображений на сайт)

Установка и настройка модулей
Установка
Все модули ставятся стандартно. Дополнительного внимания при установке потребует только ColorBox – для него надо будет скачать библиотеку и положить в sites/all/libraries/colorbox
Настройка
Для начала нам необходимо настроить показ тэга IMG. Для этого в «форматах текста» admin/config/content/formats выбираем Ваш формат текста (в 95% это будет Filtered HTML), жмём «настроить» и разрешаем показ тэга IMG
Теперь пробежимся по настройкам установленных модулей
ColorBox
Идём в настройки ColorBox admin/config/media/colorbox и ставим галку «Включить Colorbox для inline-элементов»
Этим мы включим ColorBox для изображений в ноде.
IMCE
IMCE не требует таких уж настроек, но на всякий случай загляните и решите сами, куда и как Вы будете складывать закачанные файлы.
BUEditor
Тут интереснее. BUEditor предоставляет различные способы форматирования текста. При помощи HTML кода, BB-кода и прочих. Я расскажу о настройке стандартного профиля (он называется default)
Настройки профиля default хранятся по адресу admin/config/content/bueditor/1
Тут Вы можете увидеть, как именно редактор будет реагировать на нажатия кнопок на его панели. Нас интересует кнопка вставки изображения. Нам повезло и она первая. Щёлкните по окну «содержимое» и замените имеющийся там код приведённым ниже.js:
var form = [
{name: 'target_src', title: 'Target image URL', required: true, suffix: E.imce.button('attr_target_src')},
{name: 'src', title: 'Image URL', required: true, suffix: E.imce.button('attr_src')},
{name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
{name: 'height', attributes: {size: 3}},
{name: 'alt', title: 'Alternative text', required: true}
];
E.tagDialog('custom', form, {title: 'Lightbox image', submit: function(tag, form) {
var val = function(n){return form.elements['attr_'+n].value};
E.replaceSelection('');
}});

Код добавляет окно вставки превью и добавляет rel-атрибут для корректной работы ColorBox.
Собственно, всё. Проверяем работу.
Создаём статью. Открывается окно создания статьи. Если загружаются кнопки визивиг-редактора, то поздравляю, BUEditor работает правильно. Нажимаем «вставить изображение» . Вы должны увидеть похожую картинку
По нажатию кнопки «просмотреть» у Вас открывается окно просмотра файлов на Вашем сервере. Это уже идёт проверка работы IMCE.
Нажмите кнопку «закачать», выберите файл с диска и отметьте галочкой размер превью, который нужно создать.
Закачав изображение на сервер кнопкой «закачать» Вы должны увидеть сообщения, что 1 – изображение успешно закачано и 2 – превью успешно создано.
Теперь вставим полученное изображение и превью в статью. Двумя рисунками выше Вы видели, что в окне вставки изображения у нас две строки Target image URL и Image URL
Первое это – оригинальное изображение, а второе это превью. Щёлкаем по кнопке «просмотреть» напротив Target image URL и указываем оригинальное изображение, а потом проделываем аналогичное действие с превью. По умолчанию превью именются по принципу размерпревью_имяфайла. Размеры превью вставятся на автомате. Указываете по желанию ALT-текст и жмёте готово. Вы должны получить на выходе строку вроде
Проследите, чтобы был вставлен rel-атрибут. Если всё ок, то жмите сохранить и Ваша, теперь проиллюстрированная статья готова.
Tags: colorboximcebueditordrupal 7урок

Полный оригинальный материал:

ASZh.com