Свои кнопки в TinyMCE на MODX

Штатный редактор MODX прилично форматирует текст, но не знает про оформление конкретного сайта: выносок, аккуратной цитаты, инлайн-кода. Дописывать HTML в исходнике — плохая идея: редактор его «поправит», а автор ошибётся.

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

Как это устроено

У пакета TinyMCE Rich Text Editor есть настройка tinymcerte.external_config — путь к JSON-файлу с конфигурацией редактора. Файл лежит в assets/ и правится без вмешательства в код пакета: обновился пакет — форматы на месте.

Шаг 1. Классы оформления на сайте

Сначала — стили. Разметка статей живёт в контейнере .article__body, поэтому правила пишем от него: один и тот же класс работает в статье и в предпросмотре.

/* тона выносок — переменными, рядом с остальными цветами */
:root{
  --note-tint:rgba(85,182,234,.09);
  --important-tint:rgba(216,163,74,.10);
  --warning-tint:rgba(224,145,58,.11);
  --danger-tint:rgba(224,87,75,.11);
}

.article__body .note,
.article__body .important,
.article__body .warning,
.article__body .danger{
  padding:16px 20px;border-radius:var(--radius);
  border:1px solid var(--line-1);border-left:4px solid var(--line-2);
}
.article__body .note{background:var(--note-tint);border-left-color:var(--accent)}
.article__body .important{background:var(--important-tint);border-left-color:var(--brass)}
.article__body .warning{background:var(--warning-tint);border-left-color:var(--warn)}
.article__body .danger{background:var(--danger-tint);border-left-color:var(--danger)}

Шаг 2. Конфиг редактора

Файл assets/css/tinymce-formats.json. Ключевой момент — style_formats_merge: true: свои группы добавляются к стандартным, а не заменяют их.

{
  "style_formats_merge": true,
  "style_formats": [
    {
      "title": "Классы сайта",
      "items": [
        { "title": "Заметка",  "block": "div", "classes": "note" },
        { "title": "Важно",    "block": "div", "classes": "important" },
        { "title": "Внимание", "block": "div", "classes": "warning" },
        { "title": "Опасно",   "block": "div", "classes": "danger" },
        { "title": "Цитата",   "block": "blockquote" }
      ]
    },
    {
      "title": "Инлайн",
      "items": [
        { "title": "Код",       "inline": "code" },
        { "title": "Клавиша",   "inline": "kbd" },
        { "title": "Выделение", "inline": "mark" }
      ]
    }
  ]
}

• block — элемент, в который обернётся выделенный абзац: div для выносок, blockquote для цитаты.
• classes — класс из шага 1; больше ничего в разметке не появляется.
• inline — инлайн-элемент: работает внутри строки, а не вокруг абзаца.
• title — то, что автор видит в списке форматов.

Шаг 3. Подключить конфиг и CSS

Системные настройки → фильтр tinymcerte. Нужны три параметра:

• tinymcerte.external_config = {base_path}assets/css/tinymce-formats.json
{base_path} — подстановка пакета, она заменяется на корень сайта; руками полный путь писать не нужно.
• tinymcerte.style_formats = []
  Пустой массив — чтобы стандартные группы не были объявлены дважды; свои форматы придут из JSON и сольются с ними.
• tinymcerte.content_css = {base_path}assets/css/style.css
  Стили сайта внутри редактора. Несколько файлов — через запятую.

После сохранения — очистить кэш MODX и перезагрузить страницу редактора.

Шаг 4. Почему в редакторе стили «не видны»

Редактор показывает текст в iframe, и тела с классом .article__body там нет — оно получает класс mce-content-body. Поэтому правила вида .article__body .note внутри редактора не срабатывают, и выноски выглядят как обычные абзацы.

Решение — продублировать ключевые правила для тела редактора (или переписать селекторы через :is(.article__body, .mce-content-body)):

.mce-content-body{
  font-family:var(--font-body);font-size:17px;line-height:1.5;
  color:var(--tx-2);background:var(--bg-1);padding:18px 20px;
}
.mce-content-body .note{background:var(--note-tint);border-left-color:var(--accent)}
.mce-content-body pre{
  padding:14px 16px;line-height:1.45;font-size:13px;
  background:var(--bg-0);border-left:3px solid var(--accent-lo);
}
.mce-content-body code{background:var(--accent-dim);color:var(--accent-hi)}

Как этим пользоваться

1. Выделите абзац и выберите в списке Формат → «Классы сайта» → «Заметка». Абзац станет выноской.
2. Для инлайн-оформления выделите слово: «Инлайн» → «Код».
3. Чтобы снять формат — примените «Абзац» (Paragraph) из того же списка.

Итог

Два файла и три настройки — и редактор перестаёт быть «чужим»: он знает про выноски, цитаты и код на вашем сайте, а автор видит результат сразу, а не после сохранения.