На самом деле, не такой уж большой выбор удобных редакторов для сайта на drupal, визуальные сразу отметаю, потому как они нещадно засоряют код, хотя они очень удобны для полных чайников новичков. Мой выбор - bueditor. Легкий редактор для кодеров с возможностью создания своих кнопок (если нужно быстро кое-что дивами обрамить или класс присвоить - это делается в bueditor за 1 клик). Приступаем к установке.

На drupal.org/project/bueditor и скачиваем новую версию редактора.

Распаковываем модуль в папку /sites/all/modules

Переходим на вкладку Модули и ставим галочку напротив BUEditor, потом нажимаем сохранить настройки. Все - модуль установлен.

Недостаточек - нет файлового менеджера, но это легко поправимо. Возьмем IMCE - удобный, легкий, бесплатный файловый менеджер

Устанавливаем IMCE - менеджер загрузки изображений для drupal.

На drupal.org/project/imce - качаем последнюю версию IMCE.

Распаковываем модуль в /sites/all/modules

Переходим на вкладку Модули и ставим галочку напротив IMCE, потом нажимаем сохранить настройки. Модуль установлен.

Связываем BUEditor и IMCE:

В модулях напротив BUEditor - нажимаем Настроить.

Available editors нажимаем на редактировать - рядом с Default.

Переходим в раздел Buttons и создаем новую кнопку - Load Images и рядом в поле вставляем код:

js:
var B = eDefBrowseButton('/imce/browse', 'attr_src', 'Открыть менеджер изображений', 'image');
var form = [
{name: 'src', title: 'URL изображения', suffix: B},
{name: 'width', title: 'Ширина и Высота', suffix: ' x ', getnext: true, attributes: {size: 3}},
{name: 'height', attributes: {size: 3}},
{name: 'alt', title: 'Альтернативный текст'},
{name: 'align', title: 'Выравнивание', type: 'select', options: {'': '', left: 'По левому краю', right: 'По правому краю', center: 'По центру'}} //align
];
eDefTagDialog('img', form, 'Свойства изображения', 'OK');

После выбираем изображение кнопки и нажимаем Сохранить настройки.

Также можно расширить функционал кнопок, к примеру добавим кнопку тега p - параграф.
Создаем новую кнопку - называем ее Paragraph. И вставляем в поле рядом с кнопкой

<p>%TEXT%</p>

В окне выбора изображения кнопки пишем P. Жмем Сохранить настройки. Таким способом можно добавлять кнопки тегов без параметров.

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