mxEditorJs

Block content editor for MODX 3 based on Editor.js. Replaces the default TinyMCE/CKEditor: content is created in blocks (heading, text, image, video), and the site renders proper HTML.

Quick links

Need	Document
Enable editor in 3 steps	Quick start
Blocks, media, embed	Editor guide
Configure tool profiles and media	System settings
Connector API, PHP classes, data formats	API
TVs, HTML → Editor.js migration	Integration
Common editor questions	FAQ
Save flow, sidecar, connector	Flows

Who reads what

• Content editor: Editor guide
• Administrator: System settings, FAQ
• Developer: API, Flows, Architecture, Troubleshooting

Package: 1.1.0-beta2. modstore.pro, GitHub. Changelog in the package repo: core/components/mxeditorjs/docs/changelog.txt.

Features

• Block editor — 14 block types: paragraph, header, list, checklist, quote, table, code, raw HTML, embed, image, gallery, attachment, delimiter, warning
• TV support — editor in main resource content and in Template Variables of type textarea with richtext option
• Media upload — drag-and-drop images and files via MODX Media Sources. Separate paths for images and attachments (Attaches)
• Gallery — multiple images in one block, sorting, fit and slider modes, upload and Browse via Media Source (same as Image)
• File browser — browse Media Source directories
• Link autocomplete — MODX resource search when inserting links
• HTML → Editor.js migration — convert existing HTML content
• Tool profiles — presets (default, minimal, blog, full) and custom
• Fullscreen, Source Preview, Undo/Redo, text alignment
• Localization — Russian and English, inherits manager locale
• CSS presets — configurable classes for images and links

Editor.js plugins used

mxEditorJs builds the editor from the following block and inline tools, block tune, and plugin. Full catalog: Awesome Editor.js.

Block tools

Plugin	Description	Links
@editorjs/paragraph	Basic text block	npm · awesome
@editorjs/header	Headings H2–H5	npm · awesome
@editorjs/list	Bullet and numbered lists	npm · awesome
@editorjs/checklist	Checklist with checkboxes	npm · awesome
@editorjs/quote	Quote	npm · awesome
@editorjs/table	Table	npm · awesome
@editorjs/code	Code block	npm · awesome
@editorjs/raw	Raw HTML	npm · awesome
@editorjs/embed	Embed (YouTube, Paste, etc.)	npm · awesome
@editorjs/attaches	File attachments	npm · awesome
@editorjs/delimiter	Delimiter	npm · awesome
@editorjs/warning	Warning block	npm · awesome
Image (custom)	Image with MODX Media Source upload and browser	Part of mxEditorJs (ImageTool.ts), similar to @editorjs/image
Gallery (custom)	Image gallery on @kiberpro/editorjs-gallery: sorting, fit/slider modes	Part of mxEditorJs (GalleryTool.ts)

Inline tools

Plugin	Description	Links
@editorjs/marker	Text highlight (marker)	npm · awesome
@editorjs/inline-code	Monospace code in text	npm · awesome
@editorjs/underline	Underline	npm · awesome

Links and MODX resource autocomplete are implemented by the custom LinkAutocomplete tool in mxEditorJs (inspired by @editorjs/link-autocomplete).

Block tune

Plugin	Description	Links
editorjs-text-alignment-blocktune	Text alignment in blocks (left, center, right)	npm · GitHub · awesome

Editor plugins

Plugin	Description	Links
editorjs-undo	Undo/Redo	npm · GitHub · awesome

Core

Plugin	Links
@editorjs/editorjs	Editor.js core

Requirements

Dependency	Version
MODX Revolution	3.0.3+
PHP	8.2+
Node.js	18+ (only for building frontend from source)

Installation

Via package manager

1. Go to Extras → Installer (in MODX 3: Packages → Installer)
2. Click Download Extras and refresh the package list
3. Find mxEditorJs, click Download, then Install
4. Manage → Clear cache (in MODX 3: Settings → Clear cache)

Or install a transport package manually: download mxeditorjs-*.transport.zip, in Packages → Installer click Upload package, select the file, install, then clear cache.

From source (development)

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

Quick start (3 steps)

1. System → System settings → find which_editor → select mxEditorJs
2. Ensure mxeditorjs.enabled = Yes
3. Open any resource — the block editor appears in the content field

See: Quick start.

System settings (overview)

All settings are in the mxeditorjs namespace.

Key	Default	Purpose
mxeditorjs.enabled	true	Enable/disable editor
mxeditorjs.profile	default	Active tool profile
mxeditorjs.enabled_tools	—	Override profile: comma-separated tool list
mxeditorjs.image_mediasource	1	Media Source ID for images and gallery
mxeditorjs.image_upload_path	images/resources/{resource_id}/	Image upload path (Image, Gallery)
mxeditorjs.file_upload_path	files/resources/{resource_id}/	Attachment upload path (Attaches)
mxeditorjs.gallery_max_count	0	Max images in Gallery block (0 = no limit)
mxeditorjs.max_upload_size	5242880 (5 MB)	Max upload size (bytes)

Full list: System settings.