TipTapEditor

Русский

English

Русский

English

Тема

Что это ​

TipTapEditor — визуальный редактор для менеджера MODX Revolution 3 на основе Tiptap 3 (ProseMirror). После установки он появляется в системной настройке which_editor под именем TipTapEditor и заменяет обычное текстовое поле в поле «Содержимое» ресурса и в дополнительных полях (TV) типа Rich Text.

Что умеет редактор:

  • привычное форматирование: заголовки, списки, цитаты, цвет, выравнивание, код, таблицы;
  • ссылки на ресурсы MODX через поиск по заголовку, псевдониму или ID, ссылки на файлы и якоря;
  • изображения из файлового менеджера MODX, загрузка с компьютера и копирование по ссылке, подписи, «увеличение по клику», галереи;
  • встраивание видео YouTube, VK Видео и Rutube и других iframe;
  • защиту тегов MODX [[...]] и конструкций Fenom: они сохраняются символ в символ;
  • режим HTML-кода, полноэкранный режим, всплывающие меню, команды через /, строку состояния;
  • очистку текста, вставленного из Word и Google Docs;
  • подсказки при наборе тегов MODX и переменных Fenom;
  • профили: разные панели инструментов и настройки для разных полей.

Требования ​

  • MODX Revolution 3.0 или новее;
  • PHP 8.0 или новее.

Всё нужное уже в пакете: редактор не обращается к CDN, Tiptap Cloud и сторонним сервисам, не требует API-ключей и не использует платные расширения. Для сборки из исходников нужны Node.js 20.19+ (или 22.12+) и npm, подробнее — в разделе Сборка и тесты.

Главные принципы ​

Содержимое не меняется без вашего ведома ​

Ресурсы MODX часто содержат не только текст, но и вызовы сниппетов, плейсхолдеры, Fenom, произвольный HTML. Обычный визуальный редактор такое портит: экранирует & в параметрах сниппета, разворачивает <div>, добавляет к ссылкам target и rel. TipTapEditor устроен иначе.

  • Открыли и сохранили без правок — в базу уходит ровно то, что было. Поле обновляется только после настоящего изменения документа.
  • Теги MODX и Fenom сохраняются как написаны. В тексте они показываются защищёнными плашками, на отдельной строке — карточками. Подробнее — в разделе Теги MODX и Fenom.
  • HTML без визуального аналога (<div>, <section>, <script>, собственные элементы и т. п.) становится HTML-блоком: он хранится байт в байт, а всё вокруг остаётся редактируемым.
  • Атрибуты сохраняются: class, id, data-*, style у абзацев, заголовков, списков, ссылок, изображений и таблиц.
  • Перед запуском редактор проверяет, что загрузка содержимого ничего не теряет. Если что-то всё же пропало бы, поле остаётся обычным текстовым полем с короткой пометкой: «В этом содержимом есть разметка, которую визуальный редактор не может показать без изменений…».

Если содержимое правили, могут измениться только несущественные вещи: переносы строк и пробелы между блоками, порядок атрибутов у некоторых элементов, style там, где его ставит сам редактор (выравнивание). Одиночный & в тексте записывается как &amp; — для браузера это тот же HTML.

Ошибка не мешает работать ​

Исходное поле <textarea> остаётся на странице и в форме MODX. Оно прячется только после того, как редактор успешно запустился. Если при запуске что-то пошло не так (ошибка скрипта, конфликт с другим дополнением), поле остаётся видимым и доступным для правки, а над ним появляется сообщение «Не удалось запустить редактор. Можно продолжить редактирование в обычном текстовом поле.» Сохранение ресурса работает как обычно.

Безопасность простыми словами ​

  • Ничего не выполняется в менеджере. Скрипты, iframe и HTML-блоки показываются карточками с текстовым превью. Видео не загружается, пока вы редактируете, а обработчики вроде onerror не срабатывают.
  • Опасные адреса отклоняются. Ссылки и изображения с javascript:, vbscript:, data: и file: вставить нельзя. Изображения никогда не сохраняются в base64.
  • Права MODX действуют везде. Файловый менеджер, загрузка файлов, поиск ресурсов и подсказки элементов проверяют права пользователя (file_manager, file_upload, view_document, view_chunk и др.), политики источника файлов и ACL. Подсказки настроек показывают только ключи, никогда не значения.
  • Копирование картинки по ссылке скачивает файл на сервер только с публичных адресов: обращения к localhost и внутренней сети блокируются. Подробнее — в разделе Изображения, галереи, файлы.
  • Внешняя конфигурация — это данные. JSON-файл из tiptapeditor.external_config читается только из папок сайта, и код из него не выполняется.

Куда дальше ​