Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

Have you selected the right Tiny editor view?

Joe Robinson

July 28th, 2021

Written by

Joe Robinson

Category

Design & UX

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. The 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 view

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.

Inline Editing
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • Design & UX

    Human Computer Interaction, Iconography, Setka, and TinyMCE

    by Joe Robinson in Design & UX
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing