Editing modes: Classic view, Inline editing and Distraction free modes

TinyMCE uses three different editor views which change the editor’s appearance based on the application design needs, audience needs, and your rich text editor needs.

Our documentation mentions the three editing modes you can set up:

• “Classic” full editor mode
• Inline editing mode
• Distraction Free mode

If you’ve run into a small design nightmare, and are unsure about which editor view to select, the following list outlines some of the key design considerations.

1. Classic view

If you introduce TinyMCE into a web application, it automatically loads into Classic view (thus making Classic view the default look for the rich text editor). 

While Classic editing is easy to initiate and introduce to your page, the tradeoff is a change in sequence on your page (if you need a rich text editor that does not break the sequence of visual information in your web application, choose a different editing mode configuration). Classic editing mode introduces a toolbar, grey line boundaries, and the words “Powered by Tiny” in the lower right corner of the text editor.

2. Inline editing mode

This view gives the effect of seamlessness – where the rich text editor merges with the other elements on the page. It’s not until the user clicks on the editor space that TinyMCE focuses the cursor, and the toolbar appears (equally, when the text editor is no longer in focus, the toolbar disappears).

However, a word of warning: using Inline editing mode means that the text editor inherits whatever CSS elements you’ve set.

As for implementation, in order to set up and use Inline editing mode, you cannot use a <textarea> tag in your website’s design. You need to set up a class for the tiny.init script, and assign the class to a <div> or similar separating element in your web application design.

You can view the appearance and behavior of the TinyMCE toolbar, in the TinyMCE documentation. 

3. Distraction Free mode

When users get to the text entry component of your application, the ability to turn on Distraction Free mode, can help mitigate and reduce a sense of clutter. If you suspect your application design may result in a busier interface, the ability to change the text entry view to Distraction Free mode can solve the problem.

Distraction Free view can also become a part of your application design by default. We have a codepen example that loads in Distraction Free mode.

The advantage of Distraction Free editing mode, is that it prevents your reader’s eye being dragged back and forth across the page by different toolbars and page elements. If you have large images or colorful icons, the option to turn on Distraction Free mode can save your reader's effort when they’re entering text – because bright images and icons draw the eye of the reader.

Scrolling freedom is another Distraction Free advantage 

If you have a Classic editor embedded in your web application, and it fills with text, when the user scrolls down the page, the scroll action can focus on the editor, and back to the page. The transition between the two can be disruptive to the reader. 

Switching to Distract Free mode allows your application users to open and quickly scan text in the editor area without scrolling or causing the page to jump between the text editor and the main page.

Where to from here? 

We’ve written about best practices in form design, which can also help you prevail when facing design puzzles. In addition, we have written about design thinking from John Maeda. If you’d like to start working with one of Tiny’s different views in your web application, sign up for an account.