DEV Community

Mrinalini Sugosh (Mrina) for TinyMCE

Posted on

4 2 2 2 2

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' 
});
Enter fullscreen mode Exit fullscreen mode

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
});
Enter fullscreen mode Exit fullscreen mode

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

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

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
});
Enter fullscreen mode Exit fullscreen mode

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:

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.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay