TinyMCE 8 Inline Text Editor

TinyMCE 8 Inline Text Editor for GrapesJS

Replace GrapesJS's built-in Rich Text Editor with the full power of TinyMCE 8 — featuring inline editing, separate toolbars for block and inline elements, first-class GrapesJS Studio support, and TypeScript types included.

What this plugin does

GrapesJS ships with a minimal RTE. This plugin replaces it entirely with TinyMCE 8 — one of the world's most capable WYSIWYG editors. Your users get a familiar, professional editing experience directly inside the visual builder.

Key Features

Two editing modes

• Block elements(<p>,<div>,<li>, etc.) — full toolbar with formatting, indentation, alignment, lists, and links.
• Inline elements(<span>,<a>,<button>,<h1>–<h5>) — a compactinline_toolbarwith Enter inserting<br>instead of breaking out of the element.

First-class GrapesJS Studio support

• parentToolbar: truerenders the toolbar in the parent document — eliminates z-index conflicts with Studio's selection overlay and component badges.
• Toolbar stays visible when focus moves between the iframe and TinyMCE dropdowns.

Solid architecture

• Full TypeScript rewrite with exported.d.tstype definitions.
• Clean teardown: all event listeners, MutationObservers, and toolbar DOM are released ondisable()anddestroy().
• Fixed memory leaks and an XSS vulnerability present in v0.1.x.
• Publicdestroy()method for explicit teardown when needed.

Flexible configuration

• Supports Tiny Cloud CDN and self-hosted TinyMCE.
• tinymceoption — pass-through for any nativetinymce.init()parameters (license_key,content_style,font_family_formats,toolbar_mode, etc.).
• Toolbar as a single string ('bold italic | link') or an array of strings for multi-row layout.

Compatibility

Works with both open-source GrapesJS and GrapesJS Studio SDK.

Name of plugin do not change but it support the TinyMCE 8.