Настройка визуального редактора текста для Drupal как в Word (BuEditor + IMCE)

Для того, чтобы настроить BuEditor для Drupal и получить такой замечательный визуальный редактор текста, похожий на Word:

нужно сделать следущее:
Скачать и установить модули
http://drupal.org/project/bueditor
http://drupal.org/project/imce
http://drupal.org/project/imce_mkdir

Зайти в настройки BuEditor
admin/settings/bueditor/
Напротив настроек Default нажать ссылку "изменить" (перейдем на страницу admin/settings/bueditor/1 )
1.png

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

php:
$imce_url = function_exists('imce_access') && imce_access() ? url('imce') : '';
 
return "js:
var B = eDefBrowseButton('$imce_url', 'attr_src', 'Обзор', 'image');
var form = [
{name: 'src', title: 'URL Изображения', suffix: B},
{name: 'width', title: 'Ширина x Высота', suffix: ' x ', getnext: true, attributes: {size: 3}},
{name: 'height', attributes: {size: 3}},
{name: 'class', title: 'Выравнивание изображения', type: 'select', options: {'': '', 'leftalign': 'Влево', 'rightalign': 'Вправо', 'aligncenter': 'По центру'}},
{name: 'alt', title: 'Альтернативный текст'}
];
eDefTagDialog('img', form, 'Вставить/редактировать изображение', 'OK');
";

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

2.png

Практически все, осталось только добавить стили в файл styles.css, который лежит в папке вашей темы (например, у меня лежит в sites/all/themes/garland), для того, чтобы работала настройка "Выравнивание" в добавленной нами форме:

img.leftalign {
float: left;
margin: 0 10px 0 0;
}
 
img.rightalign {
float: right;
margin: 0 0 0 10px;
}
 
img.aligncenter {
float: none;
display: block;
margin: 0 auto;
}

Осталось только выставить настройки, какие пользователя могут использовать редактор на странице настроек BuEditor'a admin/settings/bueditor

Удачи!

Drupal 6

Комментарии

Гость 23.10.2011 - 23:37

Ну и куда это img.leftalign {
float: left;
margin: 0 10px 0 0;
}

img.rightalign {
float: right;
margin: 0 0 0 10px;
}

img.aligncenter {
float: none;
display: block;
margin: 0 auto;
} добавлять? Понятно что в тему в файле styles.css. А вот где именно вставлять вами не было указано. раз уж пишите все надо указывать. А то так картинка смотрится одинаково. А теккт как то снизу.

Nikita Petrov 19.04.2012 - 12:02

Так ведь неважно, в какое место файла вставлять эти css-стили. Вставляйте в конец. В статье невозможно разжевывать всё, иначе это энциклопедия получится :)

Галина 05.09.2012 - 22:16

Подскажите пожалуста, сделала все как вы написали, но в предоосмотре измения есть, а на странице добавления материала блок добавления картинки остался прежним. Что я сделала не так?

Галина 05.09.2012 - 23:34

Разобралась сама. Я изменила формочку BBCode а по умолчанию стояла Default. Теперь нормально все!

Еще вопросик. Как изменить папку в которую будут загружаться картинки?

Nikita Petrov 06.09.2012 - 12:07

Это тоже очень просто - надо зайти в настройки профиля IMCE, который выбран для роли вашего пользователя (настройки всех профилей хранятся в /admin/settings/imce, там надо нажать "Редактировать" напротив нужного профиля, см. скриншоты), и на странице настройки самого профиля imce там есть раздел Directories, в которой можно указать фиксированную папку или даже настроить разные папки для пользователей с помощью гибких токенов.
1.jpg
2.jpg

Галина 06.09.2012 - 15:07

Вчера сама разобралась :)
Спасибо за полезный материал. Давно искала модуль визуального редактора для своего сайта, этот группа этих модулей идеально подходит!

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