14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

Update: Changes to default UI configuration in TinyMCE 5.1

October 10th, 2019

2 min read

TinyMCE 5.1

Written by

Ben Long

Category

World of WYSIWYG

Tagged

TinyMCE 5.1 is on its way, and it’s bringing some great new UI enhancements with it. The most significant being a complete overhaul of the mobile experience, catering for the increasing trend among users to write and edit content on the move. (It’s really slick!) At the same time, we’re taking the opportunity to update the desktop UI to bring it in line with current and evolving expectations.

Version 5.1 is being released to the community next week, which means Tiny Cloud users will see the effects of this change when it’s rolled out to enterprise mid-November.

We have a commitment, not only to innovation, but also to ensure transitions like these are as seamless as possible for you and your users. So here’s an overview of the major UI changes, as well as instructions for reverting to the original defaults if required.

For full details about what’s new in 5.1, refer to the release notes (coming soon).

What’s changing?

Mobile UI

Previously: When displayed on mobile, users were presented with their content inside an inactive frame. Then, once clicked, the editor would open in full-screen mode, ready to use.

TinyMCE 5.0 default mobile UI.

Now: The editor is immediately active within the page, and the look and feel is much improved, complete with a scrolling toolbar.

TinyMCE 5.1 default mobile UI.

Desktop ‘more drawer’ now on by default

Previously: When the size of the editor window was too small to fit all of the icons on the toolbar, the default behavior was for icons to wrap onto a new toolbar row.

TinyMCE 5.0 default desktop UI.

Now: The more drawer (or more icon) is on by default, and you can click it to reveal the extra options. Note, though, that this won’t apply when multiple toolbars have been configured. In this case, the more drawer will remain disabled. Refer to the documentation for more information.

TinyMCE 5.1 default desktop UI.

Want the old UI back?

As much as we love the new UI and are confident that it’s preferred by most users, we understand you may want the option of keeping the old UI.

You can revert to the previous UI for mobile, desktop, or both by adding some simple configuration to your initialization script.

For mobile:

<code>tinymce.init({
 ...
 mobile: {
   theme: 'mobile'
 }
});</code>

For desktop:

<code>tinymce.init({
 ...
 toolbar_drawer: false
});</code>

In the future, we plan to remove the old ‘mobile’ theme, as the new default Tiny theme has superior mobile support out of the box.

What next?

Keep enjoying TinyMCE and the improvements brought to you in version 5.1. And if you have any questions or concerns, please don’t hesitate to reach out to us.

TinyMCE
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • World of WYSIWYGNov 29th, 2023

    Best WYSIWYG editor image upload solutions compared: under pressure

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.