Настраиваем редактор TinyMCE и режим форматирования

Продолжаем строить наш сай. В прошлой статье мы установили редактор, теперь будем настраивать его под себя.

Переходим по уже известному нам адресу configuration → content authoring → wysiwyg profile. После установки редактора здесь появилась таблица. В первом столбце идут режимы форматирования, во втором используемые для них редакторы. Настроим режим FilteredHTML. В Выпадающем списке напротив FilteredHTML выбираем установленный ранее редактор TinyMCE и жмём save.

Переходим по ссылке edit. Здесь у нас несколько блоков настроек. Пойдём по порядку.

BASIC SETUP

Первым пунктом идёт Enabled by default(применить по умолчанию). Применить по умолчанию означает что все пользователи вашего сайта которым доступен этот режим форматирования будт использовать его по умолчанию.

Следующий пункт Allow users to choose default (разрешить пользователям выбирать по умолчанию). Сейчас на сайте есть три группы пользователей. Администратор, зарегистрированный и анонимный. Каждая группа обладает определёнными правами. Подробнее о пользователях и правах здесь. Если мы разрешим зарегистрированным использовать ещё один режим форматирования они смогут назначить его режимом по умолчанию у себя в профиле.

Последний пункт  Show enable/disable rich text toggle link. Если отмечен то можно отключать редактор.

В основных настройках есть возможность выбрать язык интерфейса. Для смены языка нам понадобятся файлы локализации с сайта редактора. Если учесть что в редакторе только кнопки, то можно оставть как есть.

BUTTONS AND PLUGINS

Выбираем кнопки для нашего друпаловского wysiwyg редактора TinyMCE. Говоря кнопки я имею ввиду возможности доступные в TinyMCE. Для режима по умолчанию вполне хватит bold italic и Strike-through. Не забывайте это режим используется в коментариях. Для себя я установил настройки как на картинке.

EDITOR APPEARANCE Опции этого блока изменяют расположение кнопок в TinyMCE и выравнивание. Всегда оставлял как есть.

CLEANUP AND OUTPUT

Verify HTML - исключает потенциально вредоносный код.

Preformatted - вставляет символы табуляции и пробелы как они есть. Если вы вставите несколько пробелов подряд то на странице они отбразяться как один. При включении этой опции все пробелы будут отображены.

Convert <font> tags to styles - HTML теги <font> определяющие свойства шрифта заменяются на другие теги с прописааными в них стилями.

Remove linebreaks - удаляет лишние переносы строк. Если при редактировании текста был несколько раз нажат enter мы получим разрыв в тексте. При включённой опции лишние переносы строк будут удалены.

Apply source formatting - общее форматирование всего HTML кода

Force cleanup on standard paste - при использовании клавиш ctrl+v буфер обмена будет очищаться.

Последнии три опции могут конфликтовать с фильтрами.

CSS В этом блоке определяем стили оформления для редактора TinyMCE.

Block formats - череззапятую перечисляются теги которые обозначают блочные форматы.

Editor CSS - CSS стили для редактора.

Editor CSS - если в предидущем пункте выбрано Define CSS указываем путь к CSS файлу.

Define CSS - указываем стили для форматирования.

Не забываем нажать Save и смотрим на результат. Переходим Content → Add Content → Article. У вас должно получиться что-то похожее.

Прежед чем продолжать давайте разберёмся для чего нужны различные режимы форматирования. У нас на сайте есть три группы пользователей. Групп может быть больше(для чего это нужно и как это сделать читайте тут). Для каждой группы мы определяем свой режим ввода. Зарегистрированным пользователям можно разрешить добавлять материалы на сайт, при этом пользователь должен иметь возможность вставлять картинки и возможно ссылки. Не зарегистрированный пользователь максимум что может это комментировать. Картинки в комментариях это дело вкуса, а вот ссылки я бы рекомендовал отключить. Бывают ситуации когда комментарии с ссылками добавляются по несколько сотен за день. За неделю может набраться тысяча таких коментов. Для молодого сайта это может быть смертельно. Сайт конечно будет работать, но в глазах поисковиков он будет выглядеть как линк помойка. Разрешайте пользователям необходимый минимум. Для ананимусов по умолчанию применяется Plain Text.

Настраиваем фильтры режима форматирования

Для настройки фильтров переходим Configuration → Content authoring → Text format Жмём configure напротив режима который хотим отредактировать.

Первым делом определимся кто сможет использовать данный режим форматирования. Для этого у нас есть раздел Roles. Сейчас у нас три группы анонимные зарегистрированные и администратор. Если создадите ещё какие-то группы пользователей они также здесь отобразятся.

Следующий раздел Enabled filters - применение фильров.  При подключении фильтров которые имеют дополнителные настройки в разделе filter settings будут появляться соответствующие пункты.

Первый фильтр Limit allowed HTML tags разрешает использовать теги пречисленные в настройках. Можете дополнить список записывая теги через пробел. если в теге записаны какие либо JavaScript события или CSS они будут удалены.

Display any HTML as plain text - Все HTML теги предназначенные для форматирования отображаются как простой текст.

Convert line breaks into HTML (i.e. <br> and <p>) - Преобразует перевод строки в теги.

Convert URLs into links - если ссылка слишком длинная то текстовая часть ссылки будет сокращаться. Сама ссылка останется. Количество символов после которого происходи сокращение указывается в настройках.
Последний фильтр Correct faulty and chopped off HTML -  исправляет некорректный HTML.

Выбранные фильтры применяются к тексту по очереди. Очерёдность указана в разделе Filter processing order. Те что сверху применяются первыми. Приведу простой пример. Вы выбрали фильтр который преобразует URL в ссылки, а следом поставили фильтр запрещающий ссылки. В итоге URl сохранится как обычный текст. Поменяв фильтры местами мы добъёмся нужно результата. Сначала будут удаляться теги, а потом URL преобразовываться в ссылку.

Изначально доступно три режима форматирования. Возможно вам этого окажется мало или захотите на чём-нибудь потренироваться. Создать свои режимы форматирования несложнее чем редактировать уже существующие. Переходим в меню Configuration → Content authoring → Text format - Add text format, вводим название режима, а дальше вы всё знаете.

На последок совет не относящийся к настройкам сайта. Довольно часто тексты на сайт вставляют скопировав их из файла. Если текст был скопирован из word после сохранения получается совсем не то чего мы ожидали. Почему это происходит? В статье Установка модуля на примере wysiwyg говорилось, что в документах созданных в Word есть разметка незаметная пользователю. Браузер в отличии от нас видит всё. В итоге документ сохраняется с разметкой вордовсокго документа. Набирайте текст в простых редакторах например notepad.

Если возникли вопросы пишите в коментарии или свяжитесь со мной. Адреса и номера в разделе контакты.