mxEditorJs

Блочный редактор контента для MODX 3 на базе Editor.js. Работает вместо стандартного TinyMCE/CKEditor: контент создаётся блоками (заголовок, текст, картинка, видео), на сайте отображается корректный HTML.

Быстрые ссылки

Нужно	Документ
Включить редактор за 3 шага	Быстрый старт
Работа с блоками, медиа, embed	Руководство редактора
Настроить профили инструментов и медиа	Системные настройки
Connector API, PHP-классы, форматы данных	API
TV, миграция HTML → Editor.js	Интеграция
Типовые вопросы редакторов	FAQ
Save flow, sidecar, connector	Потоки

Кому что читать

• Редактору контента: Руководство редактора
• Администратору: Системные настройки, FAQ
• Разработчику: API, Потоки, Архитектура, Решение проблем

Пакет: 1.1.0-beta2. modstore.pro, GitHub. Changelog — в репозитории пакета: core/components/mxeditorjs/docs/changelog.txt.

Возможности

• Блочный редактор — 14 типов блоков: параграф, заголовок, список, чеклист, цитата, таблица, код, raw HTML, embed, изображение, галерея, вложение, разделитель, предупреждение
• Поддержка TV — редактор в основном контенте ресурса и в Template Variables типа textarea с опцией richtext
• Загрузка медиа — drag-and-drop изображений и файлов через MODX Media Sources. Отдельные пути для изображений и вложений (Attaches)
• Галерея — несколько изображений в одном блоке, сортировка, режимы «сетка» и «слайдер», загрузка и «Обзор» через Media Source (как у Image)
• Браузер файлов — навигация по директориям Media Source
• Автодополнение ссылок — поиск ресурсов MODX при вставке ссылок
• Миграция HTML → Editor.js — конвертация существующего HTML-контента
• Профили инструментов — предустановки (default, minimal, blog, full) и пользовательские
• Полноэкранный режим, Source Preview, Undo/Redo, выравнивание текста
• Локализация — русский и английский, наследование локали менеджера
• CSS-пресеты — настраиваемые классы для изображений и ссылок

Используемые плагины Editor.js

mxEditorJs собирает редактор из следующих блоковых и инлайновых инструментов, блочного tune и плагина. Полный каталог инструментов и интеграций: Awesome Editor.js.

Блоковые инструменты (Block Tools)

Плагин	Описание	Ссылки
@editorjs/paragraph	Базовый текстовый блок	npm · awesome
@editorjs/header	Заголовки H2–H5	npm · awesome
@editorjs/list	Маркированные и нумерованные списки	npm · awesome
@editorjs/checklist	Чеклист с галочками	npm · awesome
@editorjs/quote	Цитата	npm · awesome
@editorjs/table	Таблица	npm · awesome
@editorjs/code	Блок кода	npm · awesome
@editorjs/raw	Сырой HTML	npm · awesome
@editorjs/embed	Встраиваемый контент (YouTube, Paste и т.д.)	npm · awesome
@editorjs/attaches	Вложение файлов	npm · awesome
@editorjs/delimiter	Разделитель	npm · awesome
@editorjs/warning	Блок предупреждения	npm · awesome
Image (кастомный)	Изображение с загрузкой и браузером MODX Media Source	В составе mxEditorJs (ImageTool.ts), аналог @editorjs/image
Gallery (кастомный)	Галерея изображений на базе @kiberpro/editorjs-gallery: сортировка, режимы fit/slider	В составе mxEditorJs (GalleryTool.ts)

Инлайновые инструменты (Inline Tools)

Плагин	Описание	Ссылки
@editorjs/marker	Выделение текста (маркер)	npm · awesome
@editorjs/inline-code	Моноширинный код в тексте	npm · awesome
@editorjs/underline	Подчёркивание	npm · awesome

Ссылки в тексте и автодополнение по ресурсам MODX реализованы кастомным инструментом LinkAutocomplete в составе mxEditorJs (по мотивам @editorjs/link-autocomplete).

Блочный tune (Block Tune)

Плагин	Описание	Ссылки
editorjs-text-alignment-blocktune	Выравнивание текста в блоках (влево, по центру, вправо)	npm · GitHub · awesome

Плагины редактора

Плагин	Описание	Ссылки
editorjs-undo	Отмена и повтор действий (Undo/Redo)	npm · GitHub · awesome

Ядро

Плагин	Ссылки
@editorjs/editorjs	Ядро Editor.js

Требования

Зависимость	Версия
MODX Revolution	3.0.3+
PHP	8.2+
Node.js	18+ (только для сборки фронтенда из исходников)

Установка

Через менеджер пакетов

1. Перейдите в Extras → Installer (в MODX 3: Пакеты → Установщик)
2. Нажмите Download Extras и обновите список пакетов
3. Найдите mxEditorJs в списке, нажмите Download, затем Install
4. Управление → Очистить кэш (в MODX 3: Настройки → Очистить кэш)

Либо загрузите транспортный пакет вручную: скачайте mxeditorjs-*.transport.zip, в Пакеты → Установщик нажмите Загрузить пакет, выберите файл и установите, затем очистите кэш.

Из исходников (разработка)

cd /path/to/modx/Extras/
git clone https://github.com/Ibochkarev/mxEditorJs mxEditorJs
cd mxEditorJs
npm install
npm run build
php _build/build.php

Быстрый старт (3 шага)

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

Подробнее: Быстрый старт.

Системные настройки (кратко)

Все настройки в пространстве имён mxeditorjs.

Ключ	По умолчанию	Назначение
mxeditorjs.enabled	true	Включить/выключить редактор
mxeditorjs.profile	default	Активный профиль инструментов
mxeditorjs.enabled_tools	—	Переопределение профиля: список инструментов через запятую
mxeditorjs.image_mediasource	1	ID Media Source для изображений и галереи
mxeditorjs.image_upload_path	images/resources/{resource_id}/	Путь загрузки изображений (Image, Gallery)
mxeditorjs.file_upload_path	files/resources/{resource_id}/	Путь загрузки файлов-вложений (Attaches)
mxeditorjs.gallery_max_count	0	Макс. изображений в блоке Gallery (0 = без лимита)
mxeditorjs.max_upload_size	5242880 (5 МБ)	Макс. размер загружаемого файла (байты)

Полный список: Системные настройки.