Настраиваем TinyMCE в MODX Revolution. TinyMCE – настройка, установка и использование визуального редактора

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед

TinyMCE: установка и настройка

Визуальные редакторы предназначены для того, чтобы Вам не приходилось форматировать материал, который Вы хотите добавить на сайт, с помощью HTML-тэгов.

Не секрет, что далеко не всем по душе сидеть в админке и проставлять HTML-код вокруг добавляемого текста, картинок и т.п. Многим и вовсе не хочется изучать HTML.

Именно для таких ситуаций и создан специальный редактор - TinyMCE .

Это JavaScript-редактор, который подключается к тем полям, в которые вводятся данные и значительно упрощает процессы добавления и редактирования контента.

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

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

И все это - без знаний языка HTML.

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

Это позволяет Вашим посетителям более разнообразно форматировать комментарии, что добавляет им выразительности. Разумеется, Вы можете использовать TinyMCE и в других случаях, где сочтете это необходимым и уместным.

Вот лишь некоторые вещи, которые Вы узнаете после просмотра уроков:

1. Как установить редактор TinyMCE.
2. Какими функциями для форматирование контента он обладает.
3. Как можно менять внешний вид редактора (режимы работы и скины).
4. Как настраивать размеры редактора и производить настройку его функций по своему вкусу.
5. Как русифицировать TinyMCE.
6. Как можно вынести настройки TinyMCE в отдельный файл.

Для ознакомления с содержанием уроков Вы можете просмотреть видео ниже. Скачать видеоуроки в высоком качестве можно по ссылкам выше.

P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Смотрите также:

Одно из самых популярных дополнений для 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 и много других. Можно "поиграть" ими, размещая кнопки в разном порядке.

Недавно возникла необходимость добавить на сайт клиента новую страницу. Админка на сайте была своеобразная, поэтому было решено сделать возможность администрирования новой страницы с помощью визуального редактора.

Был написан и отлажен скрипт администрирования страницы (html-код из на странице админки сохранялся в определенное место страницы - редактировалось основное содержание страницы без меню, шапки и прочего).

Дело оставалось за малым (как казалось) - прикрутить к форме администрирования визуальный редактор. Что же из этого вышло?

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

Сначала я попытался установить редактор TinyMCE. Это получилось, правда не без дополнительных заморочек.

Например, в TinyMCE нет встроенной загрузки изображений, поэтому приходится либо загружать картинки куда-нибудь и прописывать в TinyMCE урл картинки, либо устанавливать дополнительный плагин. Из всех плагинов для загрузки картинок в TinyMCE, что я перерыл за несколько дней и пытался устанавливать, однозначно рекомендую TinyBrowser. .

Еще одно затруднение, которое может возникнуть: как сделать русификацию TinyMCE. На официальном сайте немного непонятно, где именно скачать файлы русификации для TinyMCE. Делаем так: открываем страницу с языковыми фалами , находим «Russian», но не нажимаем на ссылку «XML», а ставим галочку слева, после этого в самом низу страницы нажимаем «Downloads». Скачанный архив с языковыми файлами надо распаковать поверх существующих папок в папке tiny_mce.

После установки оказалось, что TinyMCE безбожно перевирает html-код, удаляет из него то, что надо и вставляет в него какую-то свою неведомую хрень. В итоге, TinyMCE был удален, а вместо него прикручен редактор FCKeditor.

Итог: редактор TinyMCE устанавливать не рекомендую.

Установка и настройка FCKeditor (CKeditor)

Установить редактор FCKeditor (как, впрочем, и TinyMCE) довольно просто. Вот краткая инструкция по установке и настройке FCKeditor.

1) Скачиваем архив с редактором FCKeditor с официального сайта . Заливаем файлы из архива на сайт.

2) Создаем файл admin.php, содержащий форму: