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

Update: Changes to default UI configuration in TinyMCE 5.1

Ben Long

October 10th, 2019

Written by

Ben Long
Ben Long

Category

News & Updates

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:

tinymce.init({
 ...
 mobile: {
   theme: 'mobile'
 }
});

For desktop:

tinymce.init({
 ...
 toolbar_drawer: false
});

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
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. 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

  • G2
    News & Updates

    3 for 3, Tiny leads G2’s WYSIWYG Report

    by Robert Collings in News & Updates

Build beautiful content for the web with Tiny.

The rich text editing platform that helped launch Atlassian, Medium, Evernote and more.

Begin my FREE 30 day trial
Tiny Editor