wangEditor

wangEditor is an open-source web rich text editor built on top of Slate.js, distributed as a monorepo of scoped npm packages (@wangeditor/editor, @wangeditor/core, plus feature modules for lists, tables, video, image upload, and code highlighting). The @wangeditor/editor package is the top-level bundle most consumers install: it wires the Slate-backed core editor and toolbar together with all the built-in modules via a static Boot registry, so a working rich text editor can be dropped into a page with a handful of lines of JS, Vue, or React glue code.

It is popular in the Chinese-language JavaScript ecosystem in particular, with first-class CJK input handling, a configurable toolbar, HTML import/export, and a module system that lets third-party packages register their own menus, renderers, and HTML serializers into the same editor instance.

What You Get

• A working createEditor/createToolbar API that boots a Slate-backed rich text editor and its toolbar with a single function call each
• Built-in modules for tables, ordered/unordered lists, video embeds, image upload (via Uppy), and syntax-highlighted code blocks, all pre-registered through the Boot registry
• HTML-first workflows: parse existing HTML into the editor’s document model and serialize the document back out to HTML for storage or rendering
• A Boot static API for registering custom menus, render/HTML-conversion handlers, and third-party modules without forking the editor
• TypeScript type definitions for the editor, toolbar, and module configuration interfaces, generated straight from the source

Common Use Cases

• Embedding a WYSIWYG content editor into an admin panel or CMS authoring screen
• Building comment or forum post composers that need rich formatting without a heavyweight editor framework
• Adding an in-app documentation or knowledge-base editor to an internal tool
• Rendering and re-editing HTML content produced by other systems (import HTML, edit, export HTML)

Under The Hood

Architecture The @wangeditor/editor package (packages/editor) is a thin composition layer over @wangeditor/core, which implements the actual document model as a wrapper around Slate.js (packages/core/src/editor, render, to-html, parse-html, menus, upload). Boot (packages/editor/src/Boot.ts) acts as a static module registry — registerMenu, registerModule, registerRenderElem, registerElemToHtml, registerParseElemHtml, registerPreParseHtml, registerPlugin — that built-in modules (@wangeditor/basic-modules, list-module, table-module, video-module, upload-image-module, code-highlight) call into via register-builtin-modules/index.ts, before create.ts wires everything into a live Slate editor instance and toolbar. This is a monorepo-of-packages architecture composed through a single mutable static registry rather than dependency injection, so the Slate rendering primitive is threaded through render/, to-html/, and parse-html/ in core and every feature module simultaneously.

Tech Stack TypeScript 4.3 targeting ES5 (tsconfig.json, strict mode on but noImplicitAny disabled), bundled per-package with Rollup 2.41. Slate 0.72 provides the underlying editable document model; snabbdom renders toolbar and menu chrome; @uppy/core and @uppy/xhr-upload back the image/video upload module; is-hotkey handles keybindings and nanoid generates ids. The monorepo is managed with yarn workspaces and Lerna (lerna.json), with each @wangeditor/* package published independently via lerna publish.

Code Quality 126 test files exist across packages/*/tests, run with Jest 27 and ts-jest against jsdom (jest.config.js roots at packages/). ESLint (.eslintrc.js) extends eslint:recommended plus @typescript-eslint and prettier, though no-unused-vars is explicitly disabled. GitHub Actions run both a Jest-based test workflow and a separate Cypress e2e workflow on push. Error handling is not systematically typed — Boot and createToolbar throw plain Error objects for misuse, and most internal failures are not wrapped or surfaced distinctly.

What Makes It Unique Its distinguishing choice is treating everything above Slate.js — menus, render/to-html/parse-html conversions, and upload behavior — as registerable through one Boot API, letting feature modules ship as independently versioned packages that self-register on import rather than requiring a plugin-with-config pattern. That factoring, plus first-class CJK support, sets it apart from other Slate wrappers, but the underlying editing model is standard Slate.js rather than a novel document engine.