MODX TinyMCE RTE — настройка визуального редактора

Сегодня урок по текстовому редактору для MODX Revolution — TinyMCE Rich Text Editor, разберемся с тем как его установить, настроить и кастомизировать.

Установка и автонастройка TinyMCE v.4 (RTE 1.4.0)

TinyMCE v.4 это устаревшая версия (с репозитория modx скачивается 5я версия). Рекомендую использовать свежую версию редактора, и настраивать ее руками. Этот так чисто для ленивых метод (пока еще рабочий).

Ручная установка TinyMCE v.4

Скачиваем TinyMCE RTE 1.4.0 со страницы плагина.

Устанавливается пакет в ручную.

И активируем.

Стандартный внешний вид

После установки визуальный редактор выглядит следующим образом.

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

Автоматическая настройка + дополнительный функционал и кастомизация

Скачиваем транспортный пакет с гитхаба или блога и устанавливаем его через Приложения — Установщик — Загрузить пакет.

После загрузки пакета устанавливаем его.

Я убрал отметку на против TinyMCE Rich Text Editor, т.к. он уже установлен.

Внимание! Не известно как ведет себя транспортный пакет вместе с уже установленными другими визуальными редакторами (кроме ace), так что их лучше удалить.

После успешной установки, будут внесены все настройки и он приобретет следующий вид и будет висеть ошибка «Ошибка при загрузке плагина: typograf из URL https://site.ru/assets/components/tinymcerte/js/vendor/tinymce/plugins/typograf/plugin.min.js.»

У кого не сменился внешний вид редактора, перезапустите установку транспортного пакета, но в этот раз уже не убирайте галку напротив «TinyMCE Rich Text Editor»

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

Либо установить его, для этого скачайте типограф, закиньте данный файл в assets/components/tinymcerte/js/vendor/tinymce/plugins и распакуйте его.

После этого, у вас появится дополнительный пункт — типографика.

Спасибо за данный транспортный пакет iWatchYouFromAfar.

Настройка (вставка) своих шаблонов

Шаблоны помогут вам добавлять какие-нибудь часто используемые элементы дизайна.

За них у нас отвечает подключенный конфиг файл assets/components/tinymcerte/tinymcerte/js/external-config.json в нем следующее содержимое:

{
	"templates": [{
		"title": "Some title 1",
		"description": "Some desc 1",
		"content": "My content"
	}, {
		"title": "Some title 2",
		"description": "Some desc 2",
		"url": "../templates/image.html"
	}]
	,
	"codesample_languages": [{
			"text": "HTML/XML", "value": "markup"
		}, {
			"text": "JavaScript", "value": "javascript"
		}, {
			"text": "CSS", "value": "css"
		}, {
			"text": "PHP", "value": "php"
		}, {
			"text": "Ruby", "value": "ruby"
		}, {
			"text": "Python", "value": "python"
		}, {
			"text": "Java", "value": "java"
		}, {
			"text": "C", "value": "c"
		}, {
			"text": "C#", "value": "csharp"
		}, {
			"text": "C++", "value": "cpp"
	}]
,
	"spellchecker_languages": "Russian=ru,Ukrainian=uk,English=en",
	"spellchecker_language": "ru",
	"spellchecker_rpc_url": "//speller.yandex.net/services/tinyspell"
}

Нас интересуют первые строки, давайте создадим свой шаблон, к примеру довольно часто в тексте нужно выделять какие-нибудь элементы, для этого можно использовать элемент bootstrap alert. Создадим его:

1. Создаем каталог templates в assets/components/tinymcerte
   
2. Создаем в нем html файл с именем alert и следующим кодом:

   <div class="alert alert-info" role="alert">Замените данный текст</div>

   

3. Правим external-config.json меняем значения первого шаблона на

   "title": "alert",
   "description": "блок внимания",
   "url": "../assets/components/tinymcerte/templates/alert.html"

4. Сохраняем и проверяем.
   

У кого в редакторе не раскрашиваются элементы, добавьте CSS для контента.

таким образом вы можете создать кучу различных шаблонов и использовать их.

Установка и ручная настройка актуальной версии TinyMCE v5

Идем в Пакеты — Установщик, на открывшейся странице кликаем по кнопке «Загрузить пакеты».

На открывшейся странице в поиске вбиваем (или копируем и вставляем): TinyMCE Rich Text Editor и нажимаем Enter. После чего жмем на против нужного пакета кнопку «Загрузить».

После загрузки возвращаемся в Менеджер пакетов и устанавливаем его.

Настройка TinyMCE (RTE)

По умолчанию редактор содержит необходимый функционал, но если вдруг его вам не хватает, то читаем далее.

Активация доп. плагинов

По умолчанию автор пакета TinyMCE Rich Text Editor включил все самое необходимое, но на всякий случай позаботился и о частных случаях включив в компонент дополнительные плагины (41 open source плагина (большая часть их них включена), их описания можно почитать на оф. сайте редактора: tiny.cloud/docs/plugins/opensource/ + парочка адаптированных под MODX плагинов, например: modximage — альтернатива image, modxlink — альтернатива link.

Все плагины физически лежат в assets/components/tinymcerte/js/vendor/tinymce/plugins. Включать и отключать их можно в системной настройке: tinymcerte.plugins. Там перечислены все включенные плагины (туда указываются названия папок с плагинами из …/tinymce/plugins), следовательно если, что-то не нужно можно убрать или наоборот.

К примеру вы хотите создать блок на подобии моего и писать IT статьи с кодом, тогда вы можете включить плагин «codesample» — сейчас включен по умолчанию.

в системной настройке tinymcerte.plugins.

После чего он появится в панеле редактора (или в каком-то из пунктов).

Активации дополнительных плагинов хватит для 80% рядовых пользователей. Для тех, кто установил PageBlock — вообще скорее всего не нужно даже заворачиваться с какими либо настройками!

Включение полных (абсолютных) URL при вставке ссылок

Если вы решились избавиться от тега base или вообще просто хотите чтобы вставлялись (при вставке ссылок, через редактор), ссылки с хостом и т.д., т.е. https://site.ru/name-linc, а не name-linc (как сделано по умолчанию в cms wordpress). Тогда установите следующие настройки:

• Относительные URL — tinymcerte.relative_urls — Нет.
• Удалить скрипт хоста — tinymcerte.remove_script_host — Нет.

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

Любите пихать целые блоки в редактор и хотите видеть их визуал, тогда подключите основной файл стилей сайта к редактору, в системной настройке CSS для контента (tinymcerte.content_css).

Добавление типографа

Скачиваем плагин типографа для TinyMCE 5:

Далее закидываем по ftp, папку с файлами типографа в assets/components/tinymcerte/js/vendor/tinymce/plugins

После чего включаем его в системной настройке tinymcerte.plugins и добавляем его кнопку в системную настройку tinymcerte.toolbar1

Добавление шаблонов

Включаем template в системной настройке tinymcerte.plugins и добавляем его кнопку в системную настройку tinymcerte.toolbar1 . После этого у нас появиться кнопка вставки шаблонов, но если ее нажать вы увидите ошибку.

Ошибка выходит т.к. у нас просто на просто нет никаких шаблонов, и чтобы добавить их, нам нужно создать и подключить внешний конфиг на json.

Создайте файл external-config.json со следующим содержимым:

{
	"templates": [{
		"title": "Some title 1",
		"description": "Some desc 1",
		"content": "My content"
	}, {
		"title": "Some title 2",
		"description": "Some desc 2",
		"url": "../templates/image.html"
	}]
	,
	"codesample_languages": [{
			"text": "HTML/XML", "value": "markup"
		}, {
			"text": "JavaScript", "value": "javascript"
		}, {
			"text": "CSS", "value": "css"
		}, {
			"text": "PHP", "value": "php"
		}, {
			"text": "Ruby", "value": "ruby"
		}, {
			"text": "Python", "value": "python"
		}, {
			"text": "Java", "value": "java"
		}, {
			"text": "C", "value": "c"
		}, {
			"text": "C#", "value": "csharp"
		}, {
			"text": "C++", "value": "cpp"
	}]
,
	"spellchecker_languages": "Russian=ru,Ukrainian=uk,English=en",
	"spellchecker_language": "ru",
	"spellchecker_rpc_url": "//speller.yandex.net/services/tinyspell"
}

Его мы взяли из старой версии выше) Закидываем файл в assets/components и затем подключаем в системной настройке tinymcerte.external_config.

Теперь у нас должна ожить кнопка, при нажатии на нее должно выходить такое окно.

Осталось создать шаблоны, как это делать говорилось выше. Ну еще покажу до кучи как добавить шаблон с колонками, например с 3мя.

Разметку кнопки возьмем бутстраповскую, т.к. в рамках уроков я использую шаблон на bootstrap5.

В директории assets/components/tinymcerte, создаем папку с именем templates (для хранения наших шаблонов).

Далее в созданном каталоге, создаем файл tree-colums.html и помещаем в него код указанный ниже и сохраняем.

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Далее открываем файл assets/components/external-config.json и правим там строку:

"templates": [{
		"title": "Some title 1",
		"description": "Some desc 1",
		"content": "My content"
	},

Заменяем ее на:

"templates": [{
		"title": "3 колонки",
		"description": "Добавить 3х колончатый блок",
		"url": "../assets/components/tinymcerte/templates/tree-colums.html"
	},

И пробуем добавить его.

И смотрим что получилось:

Отлично, давайте заменим в нем содержимое и посмотрим данную страницу.

Подробнее про создание шаблонов смотрите в документации.

Подключение визуального текстового редактора в introtext MODX Revolution

Довольно часто при разработке сайта требуется вывести визуальный текстовый редактор в поле introtext, чтобы не плодить отдельные дополнительные поля.

Для этого:

1. Создаем плагин, с названием introtextRTE и вставляем в него код:

   // Добавить RTE для introtext, если для ресурса включена опция richtext
   // проверяем событие "OnDocFormRender"
   $modx->regClientStartupHTMLBlock('<script>Ext.onReady(function() {
       if(MODx.loadRTE) MODx.loadRTE("modx-resource-introtext");
   });</script>');

   

2. Вешаем его на событие «OnDocFormRender» (ставим галку) и сохраняем.
   

Радуемся визуальному текстовому редактору в introtext (аннотации).

Изменение размера текстового редактора в TV полях.

Если установить текстовый редактор для TV поля, то размер текстовой области достаточно маленький

Можно потянуть за нижний правый угол чтобы его увеличить. А можно внести строчку CSS:

.mce-container iframe{min-height:275px}

в файл assets/components/tinymcerte/js/vendor/tinymce/skins/modx/skin.min.css

Очищаем кэш и смотрим, поле увеличилось.

Единственное минус данного метода — если обновите пакет, то стили слетят и вам затем заново их нужно будет добавлять. Знаете способ лучше пишите)

TinyMCE и валидация

TinyMCE по умолчанию добавляет закрывающий слэш для многих тегов, например <br />, <img src="путь_до_картинки" alt="альт" width="800" height="400" /> и прочих. Это не является критической ошибкой или предупреждением, однако валидатор на них ругается (инфо предупреждение, типа они больше не нужны и не несут никакой роли).

Так же если в редакторе добавить вывод скриптов и css то он тоже добавит к ним уже не нужные атрибуты: type="text/css" и type="text/javascript".

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

Для того, чтобы профиксить это, создайте плагин, с именем например tiny_validate, со следующим кодом:

<?php
$arr1 = array('type="text/css"', 'type="text/javascript"',' />','/>');
$arr2 = array('','','>','>');
$output = &$modx->resource->_output;
$output = str_replace($arr1,$arr2,$output);

Повесьте его на событие OnWebPagePrerender и сохраните его.

В следующем уроке создадим страницу контактов.