Набор кнопок для редактора BUEditor со смайлами

По просьбе читателя моего блога Олега я претворяю в жизнь свой давнишний план поделиться набором кнопок для редактора BUEditor с данного блога. В нем есть кнопка со смайлами, которые я находила сама, поэтому процесс немного осложнен, но и его можно осилить.

Хочу заметить, что способ вставлять смайлики кнопкой редактора не я придумала, поэтому не забудем указать ссылку на источник, который я редактировала под себя. У этого набора почти все кнопки сделаны с учетом того, что стоит модуль BBcode. Так как у меня его нет, мой набор работает и без этого модуля.

Итак, последовательность действий для Drupal 5.* (для Drupal6 не делала, поэтому не скажу, работает ли):

1. Скачать и включить 2 модуля: bueditor и smileys (Smileys Import тоже включить).
2. Скачать файл в приложении к этой записи.
3. Распаковать Zip-архив. Вы увидите две папки: Smileys и BUEditor.
4. В первой папке (Smileys) скопируйте папку my в директорию для наборов смайлов модуля smyleys: /sites/all/modules/smyleys/packs/.
5. • Зайдите в Админка → Настройки → Смайлы и выберите вкладку Импорт, вы должны увидеть новый набор my и рядом ссылку "установить".
   • После того, как вы нажмете ее, нужно будет удалить example набор, при этом он никуда не денется, смайлики будут по-прежнему в папке packs, просто на сайте они не будут использоваться. Так что не бойтесь их удалять, вы всегда сможете вернуть все на место на этой же вкладке Импорт.
   • Далее идите на вкладку Настройки и уберите там везде флажки (по умолчанию их и нет). У нас будут смайлы только в bueditor, другие места не нужны.
6. Потом фильтр смайлов нужно включить. Это делается на странице настроек форматов ввода /admin/settings/filters. Выберите формат и нажмите изменить. Отметьте фильтр смайлов флажком.
7. Во второй папке (BUEditor) лежат 2 файла и набор иконок. СНАЧАЛА скопируйте папку icons (в ней есть уже папка со смайлами) в директорию модуля bueditor. Она должна быть обязательно такой: /sites/all/modules/bueditor/, иначе не будет работать. Если вы не хотите отказываться от своих иконок для bueditor, или используете старые для чего-то еще, то просто содержимое моей папки icons поместите в icons из модуля. Названия тех иконок, которые в bueditor есть по умолчанию, остались такими же и в моей поставке, а остальные изменены, поэтому если вам скажет компьютер, что файлы с таким именем уже существуют, то не обращайте внимание и выберите либо пропустить, либо заменить. Ничего не потеряется.
8. Далее нужно создать новый редактор. Пройдите Админка → Настройка → BUEditor и создайте новый набор.
9. Импортируйте из скаченной папки BUEditor тот набор, который вы хотите, и нажмите Сохранить. Full означает полный набор кнопок, который выглядит так:
   
   

   а Light - набор, которым могут пользоваться посетители моего сайта, отправляя комментарий (можно посмотреть вживую в низу страницы)

10. В Full версии есть кнопки выравнивания текста по левому, правому краю, по центру и растяжения по ширине, и, чтобы они работали, нужно добавить в CSS файл вашей темы такие стили:
    
    .editor-right-button{text-align:right;}
.editor-left-button{text-align:left;}
.editor-center-button{text-align:center;}
.editor-justify-button{text-align:justify;}
11. Не забудьте дописать допустимые теги для ваших форматов ввода Админка → Настройка → Форматы ввода на вкладке Настроить, ведь их наличие в редакторе не означает, что они отобразятся в вашей записи. Например, для выравнивания текста нужно разрешить тег <div> (Если в формате не включен Фильтр HTML, то все теги позволяются).
12. Еще раз повторюсь, что кнопки сделаны на основе предложенных cwer, поэтому кнопка цитирования (которая кстати работает только с модулем QUOTE → не забудьте включить его фильтр в форматах ввода) с картинкой не работает в Opera и если вы хотите сделать ее работоспособной в этом браузере, то в настройках вашего набора кнопок уберите в выпадающем списке у этой кнопки картинку и впишите в текстовое поле под этим списком любое слово, которым хотите обозначить эту кнопку.

    Эта замечательная кнопка оборачивает в теги [quote] любой выделенный на странице текст.

Примечание: Помните, что здесь у кнопки "Вставить изображение" нет возможности загрузки. Только поставив модуль IMCE, можно включить загрузку картинок при нажатии на Обзор.... Для того, чтобы работало с моим набором, отредактируйте содержимое этой кнопки, опираясь на этот код.

После того, как я проделала описанные мной выше операции, я (во-первых, ощутила кайф: как здорово делать по инструкции - не боишься ничего забыть и все получается) наткнулась на то обстоятельство, что модуль позволяет только 20 кнопок в ряд, что делает набор full не эстетичным. От проблемы можно уйти, закомментировав 105 строчку файла bueditor.js в папке bueditor. А если вам нужно поставить перенос строки в другом месте, то этот код поможет решить эту проблему.

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