docs.modx.pro

Русский

English

Русский

English

Тема

mxEditorJs
mxEditorJs
Блочный редактор Editor.js для MODX 3 — контент блоками вместо TinyMCE/CKEditor
  1. Компоненты
  2. mxEditorJs
  3. Интеграция

Интеграция ​

Как включить mxEditorJs в MODX, использовать в TV и выводить контент на сайте.

Включение в менеджере ​

  1. Настройки → Системные настройки → найдите which_editor → выберите mxEditorJs.
  2. Убедитесь, что mxeditorjs.enabled = Да (пространство имён mxeditorjs).
  3. Откройте ресурс — в поле контента отображается блочный редактор.

Редактор подключается плагином к событию OnDocFormPrerender и инициализируется при появлении поля контента (или TV с richtext). Сохранение обрабатывается при отправке формы редактирования ресурса через Connector API (content/save).

Использование в Template Variables ​

  1. Создайте TV типа Текст (многострочный) (textarea).
  2. В настройках TV включите Использовать визуальный редактор (richtext).
  3. При which_editor = mxEditorJs в этом TV будет тот же блочный редактор.

Контент TV хранится в sidecar-таблице mxeditorjs_tv_content в формате Editor.js. При выводе на сайте используется сгенерированный HTML (как и для основного контента).

Вывод на сайте ​

Контент ресурса (основное поле content) после сохранения в mxEditorJs хранится в двух видах:

  • JSON — в sidecar для редактора (при следующем открытии формы подставляется в Editor.js).
  • HTML — в modResource.content (используется при выводе на фронте).

В шаблоне выводите контент как обычно:

modx
[[*content]]
fenom
{$_modx->resource.content}

Дополнительные TV с Editor.js выводятся через плейсхолдеры TV (например [[*my_richtext_tv]] или через Fenom). Рендер JSON → HTML выполняется компонентом при сохранении. На фронте всегда приходит готовый HTML.

Миграция HTML → Editor.js ​

Если у вас уже есть ресурсы с HTML в поле контента, можно конвертировать их в формат Editor.js.

  1. Через Connector: действие content/migrate с параметрами resource_id, при необходимости dry_run=1 (предпросмотр), затем confirmed=1 для перезаписи.
  2. В ответе при dry_run приходит preview (блоки) и blocks_count. При успешной миграции — migrated, blocks_count, overwritten.

После миграции при открытии ресурса в менеджере контент отображается в блочном редакторе. На сайте по-прежнему выводится HTML из modResource.content, обновлённый при миграции.

Профили и инструменты ​

Набор блоков (параграф, заголовок, список, картинка и т.д.) задаётся профилем (mxeditorjs.profile) или списком mxeditorjs.enabled_tools. См. Системные настройки.

Медиа и пресеты ​

  • Загрузка изображений и блока Gallery — Media Source mxeditorjs.image_mediasource, путь mxeditorjs.image_upload_path (шаблон с {resource_id}).
  • Загрузка файлов-вложений (Attaches) — mxeditorjs.file_mediasource и отдельный путь mxeditorjs.file_upload_path.
  • Лимит числа картинок в одном блоке Gallery — mxeditorjs.gallery_max_count (0 = без лимита).
  • CSS-классы для изображений и ссылок задаются в пресетах (mxeditorjs.image_class_presets, mxeditorjs.link_class_presets и др.) — см. Системные настройки.

Галерея на фронте ​

HTML-снимок блока Gallery генерируется при сохранении (HtmlRenderer). Разметка:

  • <figure class="mxeditorjs-gallery mxeditorjs-gallery--fit"> — сетка (режим Fit)
  • <figure class="mxeditorjs-gallery mxeditorjs-gallery--slider"> — горизонтальный скролл (режим Slider)

Базовые стили подключаются в менеджере вместе с mxeditorjs.css (gallery-front.css). На сайте они применяются к HTML из [[*content]] автоматически, если тема не переопределяет классы. При необходимости скопируйте правила из assets/components/mxeditorjs/css/gallery-front.css в CSS темы.

Что дальше ​