Набор кнопок для редактора BUEditor со смайлами
По просьбе читателя моего блога Олега я претворяю в жизнь свой давнишний план поделиться набором кнопок для редактора BUEditor с данного блога. В нем есть кнопка со смайлами, которые я находила сама, поэтому процесс немного осложнен, но и его можно осилить.
Хочу заметить, что способ вставлять смайлики кнопкой редактора не я придумала, поэтому не забудем указать ссылку на источник, который я редактировала под себя. У этого набора почти все кнопки сделаны с учетом того, что стоит модуль BBcode. Так как у меня его нет, мой набор работает и без этого модуля.
Итак, последовательность действий для Drupal 5.* (для Drupal6 не делала, поэтому не скажу, работает ли):
- Скачать и включить 2 модуля: bueditor и smileys (Smileys Import тоже включить).
- Скачать файл в приложении к этой записи.
- Распаковать Zip-архив. Вы увидите две папки: Smileys и BUEditor.
- В первой папке (Smileys) скопируйте папку my в директорию для наборов смайлов модуля smyleys: /sites/all/modules/smyleys/packs/.
-
- Зайдите в Админка → Настройки → Смайлы и выберите вкладку , вы должны увидеть новый набор my и рядом ссылку "установить".
- После того, как вы нажмете ее, нужно будет удалить example набор, при этом он никуда не денется, смайлики будут по-прежнему в папке packs, просто на сайте они не будут использоваться. Так что не бойтесь их удалять, вы всегда сможете вернуть все на место на этой же вкладке .
- Далее идите на вкладку и уберите там везде флажки (по умолчанию их и нет). У нас будут смайлы только в bueditor, другие места не нужны.
- Потом фильтр смайлов нужно включить. Это делается на странице настроек форматов ввода /admin/settings/filters. Выберите формат и нажмите изменить. Отметьте фильтр смайлов флажком.
- Во второй папке (BUEditor) лежат 2 файла и набор иконок. СНАЧАЛА скопируйте папку icons (в ней есть уже папка со смайлами) в директорию модуля bueditor. Она должна быть обязательно такой: /sites/all/modules/bueditor/, иначе не будет работать. Если вы не хотите отказываться от своих иконок для bueditor, или используете старые для чего-то еще, то просто содержимое моей папки icons поместите в icons из модуля. Названия тех иконок, которые в bueditor есть по умолчанию, остались такими же и в моей поставке, а остальные изменены, поэтому если вам скажет компьютер, что файлы с таким именем уже существуют, то не обращайте внимание и выберите либо пропустить, либо заменить. Ничего не потеряется.
- Далее нужно создать новый редактор. Пройдите Админка → Настройка → BUEditor и создайте новый набор.
- Импортируйте из скаченной папки BUEditor тот набор, который вы хотите, и нажмите
а Light - набор, которым могут пользоваться посетители моего сайта, отправляя комментарий (можно посмотреть вживую в низу страницы)
. Full означает полный набор кнопок, который выглядит так: - В 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;} - Не забудьте дописать допустимые теги для ваших форматов ввода Админка → Настройка → Форматы ввода на вкладке , ведь их наличие в редакторе не означает, что они отобразятся в вашей записи. Например, для выравнивания текста нужно разрешить тег
<div>
(Если в формате не включен Фильтр HTML, то все теги позволяются). - Еще раз повторюсь, что кнопки сделаны на основе предложенных cwer, поэтому кнопка цитирования (которая кстати работает только с модулем QUOTE → не забудьте включить его фильтр в форматах ввода) с картинкой не работает в Opera и если вы хотите сделать ее работоспособной в этом браузере, то в настройках вашего набора кнопок уберите в выпадающем списке у этой кнопки картинку и впишите в текстовое поле под этим списком любое слово, которым хотите обозначить эту кнопку.
Эта замечательная кнопка оборачивает в теги
[
quote]
любой выделенный на странице текст.
Примечание: Помните, что здесь у кнопки "Вставить изображение" нет возможности загрузки. Только поставив модуль IMCE, можно включить загрузку картинок при нажатии на . Для того, чтобы работало с моим набором, отредактируйте содержимое этой кнопки, опираясь на этот код.
После того, как я проделала описанные мной выше операции, я (во-первых, ощутила кайф: как здорово делать по инструкции - не боишься ничего забыть и все получается) наткнулась на то обстоятельство, что модуль позволяет только 20 кнопок в ряд, что делает набор full не эстетичным. От проблемы можно уйти, закомментировав 105 строчку файла bueditor.js в папке bueditor. А если вам нужно поставить перенос строки в другом месте, то этот код поможет решить эту проблему.
Вот так выглядит процесс установки редактора Bueditor для моего сайта. Если для вас оказались лишними какие-то кнопки из наборов, удаляйте их и помните - чем больше неопытному пользователю дать кнопок, тем быстрее он в них запутается.
Прикрепленный файл | Размер |
---|---|
bueditor_knopki_so_smailami_ot_SaBoNim.zip | 172.32 кб |