CKeditor 4 integration in RTE

GrapesJS ships a deliberately small rich text editor: bold, italic, underline, strikethrough and links. This plugin replaces it with CKEditor 4, so anyone editing copy on the canvas gets the full toolbar they expect from a word processor.

What it changes

The plugin registers itself through the GrapesJS customRte interface, so every text component on the canvas uses CKEditor instead of the default editor. Nothing about your component tree or stored HTML changes — only the editing surface does.

Options

• options — the CKEditor configuration object, where you define your own toolbar groups, language, plugins and formatting rules.
• position — where the toolbar sits relative to the selected text: left (default), center or right.
• ckeditor — pass the CKEDITOR constructor directly, or a CDN string to load it from. Defaults to the CKEditor 4.21.0 standard-all build.
• customRte — extend the default custom-RTE interface when you need to hook into how GrapesJS enables and disables the editor.
• onToolbar — receives the toolbar element once created, for last-mile adjustments such as forcing a minimum width.

Good to know

Install as grapesjs-plugin-ckeditor from npm or unpkg. Released under BSD-3-Clause, and used in the official GrapesJS newsletter demo.