TinyMCE: установка и настройка. Не работает визуальный редактор WordPress TinyMCE Advanced. Предостережения и доработка

Одно из самых популярных дополнений для MODX Revolution - визуальный редактор TinyMCE.

Оно и понятно, редко какой сайт может обойтись без хорошего richtext редактора для контента.

В этой статье рассматривается установка и настройка редактора TinyMCE.

Установка

Для установки необходимо скачать пакет из репозитория (http://modx.com/extras/package/TinyMCE) и установить его через раздел "Управление пакетами" вашего сайта.

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

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

Настройка TinyMCE будет включать несколько этапов:

• Подключение файла стилей
• Добавление кнопок для работы с таблицами

Подключаем файл со стилями к TinyMCE

Это нужно для того, что бы в визуальном редакторе текст выглядел один в один, как на сайте: шрифт, размер и цвет текста, оформление картинок и внешний вид таблиц.

Открываем "Настройки системы," и в фильтре выбираем "Визуальный редактор":

В этом разделе всего доступно 5 настроек:

• Путь к CSS файлу (editor_css_path) - указываете путь к вашему файлу со стилями текста. Обратите внимание,что использовать не полный css файл вашего сайта, а отдельный файл, в который вынести только стили, непосредственно относящиеся к оформлению текста (заголовки h1-h6, параграфы p, ссылки a, таблицы tables и другие). Редактор будет работать быстрее и корректнее.
• Использовать текстовый редактор (use_editor) - можно отключить редактор при необходимости на время, не удаляя при этом TinyMCE.
• Редактор (which_editor) - MODX Revolution позволяет установить несколько различных редакторов на сайт, при необходимости можно переключаться между ними. Кстати, можно переопределить эту настройку для администраторов сайта, назначив таким образом разным администраторам разный редактор.
• Редактор для элементов (which_element_editor) - укажите редактор для сниппетов, плагинов, чанков. Например это может быть CodeMirror или Ace.

Добавляем в TinyMCE кнопки для работы с таблицами

В TinyMCE, который устанавливается из репозитория MODX Revolution, по какой то причине по умолчанию отключена работа с таблицами. Нет, вы конечно можете переключится в режим HTML и написать код вручную, но зачем! Гораздо проще потратить 2 минуты и включить поддержку таблиц.

Итак, открываем настройки системы, и в первом фильтре выбираем tinymce :

Откроется список доступных параметров. Нас интересуют 2:

• tiny.custom_plugins - список подключенных плагинов к TinyMCS. В конец списка необходимо добавить "table" , подключив тем самым плагин для работы с таблицами. Плагин идет вместе с TinyMCE, и устанавливаеть его не надо, его надо просто включить.
• tiny.custom_buttons3 - список кнопок, отображаемых на 3-й строке. Укажите там "tablecontrols" , добавив тем самым набор кнопок для работы с таблицами. Понятное дело, что эти кнопки можно разместить на любой другой строке. Если вы посмотрите на другие строки, вы увидите список предустановленных кнопок, таких как undo,redo,selectall и много других. Можно "поиграть" ими, размещая кнопки в разном порядке.

Практически каждый веб-мастер использует тот или иной визуальный редактор (WYSIWYG) для размещения контента на сайте. Визуальные редакторы позволяют не только работать с HTML как с обычным текстом в текстовом редакторе, но и обладают функционалом, облегчающим жизнь вебмастеру. Однако последнее может не только упростить жизнь, но и усложнить.

В MODX Revolution в основном пользуюсь редактором TinyMCE , который устанавливается отдельным пакетом. Говорить о его достоинствах и недостатках не буду, а коснусь сегодня только тех моментов, которые я использую для облегчения работы с ним.

Дефолтные настройки

Сразу после установки пакета TinyMCE проверяю в системных настройках блоке tinymce:

Tiny.forced_root_block делаю пустой tiny.path_options должна быть пустая tiny.base_url должна быть пустая

Так же меняю опцию convert_urls на No в настройках плагина TinyMCE. Делаю я это, чтобы редактор никак не пытался изменять ссылки, которые я задаю.

Подключение файла стилей

Не всегда подключаю, но иногда это бывает полезным и упрощает работу с контентом. Делается через указание системной настройки editor_css_path в блоке системных настроек Rich-Text Editor настройка Path to CSS file (Путь до CSS файла) или.

HTML5 тэги

Честно говоря, включение HTML5 тэгов и их обработка по уму у меня не получилась. Поэтому я пошел путем разрешения любых тэгов путем добавления в файл core/components/tinymce/templates/script.tpl после строки после строки

Tiny.config = ;

Tiny.config.valid_elements = "*[*]";

Которая разрешает прохождение любых тэгов. Для желающих заморочиться, этой переменной можно присвоить перечень всех возможных HTML тэгов, включая HTML5 тэги из файла xconfig.js входящего в пакет.

TinyMCE , also known as the Tiny Moxiecode Content Editor , is a platform-independent web-based JavaScript/HTML WYSIWYG editor control, released as open source software under the LGPL by Moxiecode Systems AB. It has the ability to convert HTML textarea fields or other HTML elements to editor instances. TinyMCE is designed to easily integrate with content management systems, including Django, Drupal, Joomla! , WordPress and SOY CMS.

Ладно, расслабьтесь. Данная статья будет на доступном русском языке. =)

Как вы уже поняли, редактор является платформенным Javascript редактором HTML кода, т.е. WYSIWYG редактором для сайтов и веб приложений. Разработчиком этого полезного продукта является компания Moxiecode Systems AB. К ключевым особенностям программы относятся: поддержка темшаблонов, языковая поддержка и возможность подключения плагинов. HTML редактор TinyMCE используется во многих системах управления и движках сайтов, в том числе и в системе управления BIT company CMS v 1.01. Мы можем отметить программу как отличный и широкофункциональный инструмент для редактирования HTML кода, вставки видео, текстово-графической информации, таблиц и графиков. Правда так же отметим и скудность русскоязычной информации о методах и свойствах JS редактора TinyMCE(но вам повезло! Здесь вы найдете ответы на базовые вопросы и научитесь работать с редактором TinyMCE).

Как видно из титульного изображения выше, JS редактор очень похож на текстовый редактор в офисных приложения - принцип работы у редактора TinyMCE аналогичный. Для пользователей не знакомых с возможностями html и css есть графический интерфейс редактора. Для пользователей которые владеют языком программирования html и css есть так же расширенный редактор HTML. Данный редактор позволяет решить практически любые задачи, связанные с оформление страниц.

Инструкция полностью применима для редактора версии 3.5.11. Для более поздних версий методология работы с редактором так же должна быть аналогичной.

Установка и настройка TinyMCE

1. Скачиваем свежую версию редактора и распаковываем.

2. Копируем содержимое архива в нужную вам директорию сайта.

3. Подключаем редактор к нашему сайту путем вставки кода на нужную страницу:

4. Инициализируем редактор при помощи JavaScript кода:

tinyMCE.init({ mode: "textareas", theme: "simple" });

5. Готово! Теперь вы вставили и инициализировали простейший TinyMCE редактор.

Как вы заметили подключение и инициализация JS редактора проходит в 3 логических шага:

• подключение библиотеки к странице сайта
• инициализация объекта
• вставка тега textarea, который и становится графическим html редактором.

Инициализация редактора и его параметры

Редактор TinyMCE возможно инициализировать с различными параметрами, темами, плагинами. В данном разделе мы рассмотрим некоторые параметры и их значения. Вот пример инициализации редактора в системе управления BIT company CMS V 1.01:

tinyMCE.init({ // General options mode: "exact", elements: "content_editor", theme: "advanced", language:"ru", plugins: "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,precode,uploads_image", // Theme options theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,preCode,anchor,image,uploads_image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage", theme_advanced_toolbar_location: "top", theme_advanced_toolbar_align: "left", theme_advanced_statusbar_location: "bottom", theme_advanced_resizing: true, // Skin options skin: "o2k7", skin_variant: "silver", // Drop lists for link/image/media/template dialogs template_external_list_url: "js/template_list.js", external_link_list_url: "js/link_list.js", external_image_list_url: "js/image_list.js", media_external_list_url: "js/media_list.js", // Replace values for the template plugin template_replace_values: { username: "Some User", staffid: "991234" } });

mode [textareas |exact |specific_textareas |none ] — определяет какие html экхемляры будут преобразованы в графические редакторы TinyMCE.

• textareas — преобразовывает все теги к виду редактора
• specific_textareas — преобразуются только элементы имеющие, указанный в параметре editor_selector селектор или не имеющие селектор, указанный в editor_deselector

tinyMCE.init ({ mode: "specific_textareas", editor_selector: "editme", language:"ru", theme: "simple" });

• exact — преобразуются только элементы, идентификаторы которых перечислены в параметре elements (пример из BIT company CMS).
  
• none — элементы не преобразуются

theme [simple |advanced ] — определяет режим инициализации редактора.

• simple — режим, включающий базовые функции и запрещающий гибкую настройку
• advanced — режим, позволяющий гибкую настройку плагинов, кнопок редактора, темы редактора и т.д.

language — указывает код языкового пакета графического редактора TinyMCE.

plugins — список плагинов, инициализируемых вместе с редактором, разделенные запятыми.

theme_advanced_buttons — содержит список элементов управления для вставки в панели инструментов, где строка в панели инструментов.

theme_advanced_toolbar_location — указывает, где должны располагаться панели инструментов: top — сверху, bottom — снизу.

theme_advanced_toolbar_align — позволяет задать выравнивание панели инструментов: по левому краю, по правому и по центру.

— задает положение статусбара (top — вверху, bottom — внизу), либо указывает на его отсуствие — none.

theme_advanced_resizing — включает — true или выключает — false возможность изменять размеры окна редактора. Не работает, если значение theme_advanced_statusbar_location установлено в none.

skin — указывает какой скин данной темы необходимо использовать.

skin_variant — указывает какой вариант скина необходимо использовать.

content_css — подключает пользовательский css-файл(либо набор файлов, перечисленных через запятую), который будет использоваться в редакторе.

relative_urls — устанавливает, будут ли ссылки в редакторе относительные (true) или абсолютные (false).

template_replace_values — преобразование элемента страницы в графический редактор html кода с параметрами.

Template_replace_values: { username: "Some User", staffid: "991234" }

Вот мы и подытожим с вопросом подключения и инициализации графического редактора html кода TinyMCE для сайта. Всем спасибо!

Рассмотрим две типовые задачи: использование TinyMCE в бэкэнде и настройка bb-кодов во фронтенде.

ПредисловиеПри попытке использовать GenemuFormBundle в своем приложении я столкнулась с проблемой нехватки документации. Скорее всего, для гуру решение поставленных задач будет очевидным. Данная статья адресована в первую очередь таким же новичкам, как я.
Процедура установки GenemuFormBundle стандартная, подробно описана в документации и не вызывает проблем. Кроме того, разговор не об этом. Поговорим подробнее о виджете TinyMCE. Разумеется, кому-то проще прописать по старинке в шаблонах все необходимые скрипты и настройки, однако использование бандла избавит нас от многих хлопот. Документация для него не слишком подробная, и вот ее несколько вольный перевод с пояснениями.Официальная документация по виджету TinyMCE из GenemuFormBundle. После выполнения инструкций по установке бандла GenemuFormBundle, надо скачать и сложить в папку /web/bundles/genemuform/ скрипты с TinyMCE . Можно сложить JS в любое место, ссылка на скрипт настраивается.
Чтобы получить доступ к функциональности TinyMCE, надо прописать в конфигурационном файле как минимум вот это:
# app/config/config.yml genemu_form: tinymce: ~

Вот так будет выглядеть самое простое использование данного виджета в форме: