TinyMCE Rich Text Editor: Multi-Root vs Inline Editing

TinyMCE is a familiar and versatile rich text editor that’s known for its ease of use. For more than two decades dev’s have used it out-of-the-box (or customized) because it can be integrated into web apps in many different ways. The two integration modes we’ll cover in this article are Multi-Root editing and Inline editing.

As a developer building web applications, understanding the capabilities and limitations of each mode is key to choosing the right one to suit your needs. Let's do a deep dive into how they compare.

Multi-Root Editing

Multi-root editing lets you have multiple TinyMCE editor instances on a single page. Each instance renders in its own iframe, isolating it from the rest of the page.

For example:

tinymce.init({
  selector: '#editor1'
});

tinymce.init({ 
  selector: '#editor2' 
});

This approach enables greater control and customization since you can configure each editor separately:

tinymce.init({
  selector: '#editor1',
  plugins: 'lists table' // Simple formatting for content area
});

tinymce.init({
  selector: '#editor2',
  plugins: 'paste code' // Code editing features for sidebar
});

With multi-root you can also build reusable templates. For example:

tinymce.init({
  selector: '#templateEditor',
  content: templateHTML, 
  editable_root: true,
  editable_class: 'editable' 
});

Where templateHTML contains locked and editable sections. Include the CSS class configured with the editable_class option in your HTML to enforce an editable section. Users can then create new documents based on your templates.

Multi-root is optimal for:

• Complex pages with multiple editable sections
• Granular editor customization
• Building reusable templates
• Isolating editor instances

Inline Editing

Inline editing provides distraction-free editing directly on page elements, without iframes. For example:

tinymce.init({
  selector: '.editable',
  inline: true
});

Inline mode delivers seamless WYSIWYG – users edit the actual content on the page. The minimalist UI keeps the focus on content creation.

Inline editing is ideal for:

• Simple content like blog posts and articles
• Minimal, focused editing
• True WYSIWYG experience
• Distraction-free editor

However, inline mode does have some limitations:

• No support for mobile devices
• Lacks certain features like comments
• Only works on block elements like div and p

So while inline editing provides a smooth experience for basic needs, multi-root is more full-featured and customizable.

Explore further resources on both modes:

• Multi-Root Editing documentation
• Inline Editing documentation
• Multi-Root Editing How-to
• Inline Editing How-to

Choosing the Right Mode

When integrating TinyMCE into a web application, carefully consider which editing mode fits your use case best.

Multi-root brings power and flexibility for complex pages and reusable templates. Inline editing enables seamless distraction-free editing for simple content.

As a developer, experiment with both modes early in development. Choose the optimal TinyMCE integration strategy tailored to your users and their needs. With the right approach, you can deliver the great editing experience that users expect in a modern web app.