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
Configure tool profiles and media	System settings
Connector API, PHP classes, data formats	API
Working with TV and HTML → Editor.js migration	Integration

Who reads what

• Content editor: Quick start → using the UI (blocks, images, links) — see the component repo docs.
• Administrator: System settings → profiles, media, presets.
• Developer: API → Connector, PHP, JS; Integration → TV, migration.

Features

• Block editor — 13 block types: paragraph, header, list, checklist, quote, table, code, raw HTML, embed, image, 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
• 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 H1–H6	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

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 <repo-url> 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
mxeditorjs.max_upload_size	5242880 (5 MB)	Max upload size (bytes)

Full list: System settings.