docs.modx.pro
  1. Компоненты
  2. mxEditorJs
  3. Для разработчика
  4. Архитектура

Архитектура ​

Слои пакета и точки расширения. API connector: API. Потоки сохранения: Потоки.

Компоненты ​

СлойПутьРоль
Плагинcore/.../elements/plugins/mxeditorjs.plugin.phpRTE-хуки MODX
Connectorassets/components/mxeditorjs/connector.phpJSON API менеджера
Клиентassets/components/mxeditorjs/js/mxeditorjs.jsEditor.js, MxEditorJsApp
PHPcore/components/mxeditorjs/src/Renderer, Validator, Repository, MediaUploader, HtmlMigrator
Configsrc/Config/EditorTools.phpПрофили и список допустимых инструментов

Сниппетов и MODX processors в пакете нет.

Два сборщика HTML ​

ПутьКогдаГде
Клиент renderPreviewHtml()Сохранение формы ресурсаmxeditorjs.ts
Сервер HtmlRenderercontent/save и content/migrate (не dry_run)PHP

Логику нового блока дублируйте в обоих местах. Иначе предпросмотр в менеджере и HTML на сайте разойдутся.

Таблицы БД ​

Схема: core/components/mxeditorjs/model/schema/mxeditorjs.mysql.schema.xml

mxeditorjs_content ​

ПолеНазначение
resource_idUNIQUE, ID ресурса
content_jsonEditor.js OutputData
content_versionСчётчик версий
content_hashSHA-256 JSON
schema_versionВерсия Editor.js из JSON
created_at, updated_at, created_by, updated_byАудит

mxeditorjs_tv_content ​

Те же поля + tmplvar_id, UNIQUE (resource_id, tmplvar_id).

HtmlRenderer ​

15 типов блоков, включая mxgallery. Выравнивание через tunes.alignmentTune.alignment для paragraph, header, list, quote.

ТипHTML
paragraph<p>
header<h1>–<h6>
list<ul> / <ol>
checklist<ul class="mxeditorjs-checklist">
image<figure class="mxeditorjs-image"><img>
gallery<figure class="mxeditorjs-gallery mxeditorjs-gallery--{fit|slider}">
mxgalleryблок mxGallery (HTML зависит от сниппета mxGallery)
attaches<p><a download>
embed<div class="mxeditorjs-embed"><iframe>
delimiter<hr>
quote<blockquote> + <cite>
code<pre><code>
rawсырой HTML
table<table>
warning<div class="mxeditorjs-warning">

Расширение:

php
$renderer->registerBlockRenderer('myBlock', function (array $data, array $block): string {
    return '<div>...</div>';
});

EditorTools ​

Класс MxEditorJs\Config\EditorTools:

  • DEFAULT_AVAILABLE: CSV всех block tools
  • PACKAGE_PROFILES: эталон default, minimal, blog, full
  • resolve(): итоговый список с учётом допустимых инструментов и обновления
  • migrateProfiles() / migrateAvailableTools(): добавление gallery и mxgallery при обновлении
  • parseList(): разбор CSV списка инструментов

Приоритет: enabled_tools → profiles[profile].tools ∩ available_tools (+ слияние при обновлении) → available_tools.

ContentValidator ​

Допустимые типы: paragraph, header, list, checklist, quote, table, code, raw, embed, image, gallery, mxgallery, attaches, delimiter, warning.

Клиент (TypeScript) ​

Исходники: assets/components/mxeditorjs/js/src/.

МодульНазначение
mxeditorjs.tsMxEditorJsApp, RTE hooks, syncToTextarea, renderPreviewHtml
tools/ImageTool.tsImage + Media Browser
tools/GalleryTool.tsGallery на @kiberpro/editorjs-gallery
tools/MxGalleryTool.tsБлок mxGallery (ids / коллекция)
tools/AttachesTool.tsAttaches + patch-package
tools/LinkAutocomplete.tsПоиск ресурсов MODX
tools/MediaBrowser.tsОбщий браузер для Image/Gallery
tools/ParagraphTool.ts, HeaderTool.ts, ChecklistTool.tsОбёртки с validate

Block tools (профиль): paragraph, header, list, checklist, quote, table, code, raw, embed, image, gallery, mxgallery, attaches, delimiter, warning.

Всегда включены: inline marker, inlineCode, underline, linkAutocomplete. Tunes: alignmentTune. Plugin: editorjs-undo.

Embed ​

Инструмент @editorjs/embed без кнопки в toolbox: только Paste API. В buildTools() заданы services, включая RuTube (embedUrl для rutube.ru/video/...). Новый сервис добавляют в mxeditorjs.ts, не через системные настройки.

Интеграция RTE ​

  • MODx.loadRTE / unloadRTE: основной контент и TV
  • MutationObserver: textarea.modx-richtext (кроме #ta)
  • Toolbar: Source (Ctrl+U), Fullscreen (F11)
  • Версия в URL: ?v={filemtime} у CSS/JS

Сборка клиента ​

bash
npm install    # postinstall → patch-package (@editorjs/attaches)
npm run build  # IIFE → assets/.../js/mxeditorjs.js
npm run dev    # watch + sourcemap

Точка входа: assets/.../src/mxeditorjs.ts. Цель ES2020, формат IIFE, глобальный объект MxEditorJs.

Патч patches/@editorjs+attaches+1.3.2.patch заменяет appendCallback на rendered. Иначе диалог Attaches не откроется.

Добавление нового block tool ​

  1. npm install @editorjs/new-tool
  2. Импорт и регистрация в buildTools() (mxeditorjs.ts)
  3. Тип в ContentValidator::ALLOWED_BLOCK_TYPES
  4. Сборка HTML в HtmlRenderer и renderPreviewHtml()
  5. ID в mxeditorjs.available_tools и профили
  6. npm run build, синхронизация в установленный MODX

Transport и обновление ​

bash
php _build/build.php
# → core/packages/mxeditorjs-*.transport.zip

При обновлении настройки из transport не перезаписываются (settings => false). Resolvers дописывают gallery и mxgallery в available_tools и профили default / full / blog.

Resolver resolver_06_metrics.php отправляет анонимную статистику установки на https://metrics.modx.pro/.

Стили на сайте ​

gallery-front.css подключается только в менеджере. На сайте подключите CSS вручную. См. Интеграция.

Требования ​

Версия
MODX3.0.3+
PHP8.2+
Node.js18+ (только сборка клиента)