TinyMCE 5.1

Overview

TinyMCE 5.1 was released for TinyMCE Enterprise and Tiny Cloud on Wednesday, December 11^th, 2019. It includes TinyMCE 5.1.3 and additional changes to premium plugins. These release notes provide a high-level coverage of the changes for TinyMCE 5.1, including:

• New features and enhancements
• Premium Plugin changes
• Deprecated features
• Known issues
• Upgrading to the latest version of TinyMCE 5

Note: This is the Tiny Cloud and TinyMCE Enterprise release notes. For information on the latest community version of TinyMCE, see: TinyMCE Changelog.

New features and enhancements

The following new features and enhancements were added for the TinyMCE 5.1 release.

Mobile

TinyMCE 5.1 provides an improved mobile editor, replacing the existing mobile editor with a touch friendly version of the silver theme.

The new mobile experience comes with a number of user interface changes, building on the TinyMCE desktop experience:

• Mobile devices now use the silver theme
• Horizontal contextual menus on mobile
• Side-scrolling toolbars on mobile
• Contextual keyboard settings
• New mobile defaults for selected settings
• Table cell selection on mobile
• Touch-friendly split buttons
• Unsupported settings for mobile

The new mobile experience allows most of the TinyMCE plugins to work on mobile devices, except for:

• Comments
• Image tools
• MoxieManager
• Permanent Pen

Enabling the mobile editor

To ensure the mobile editor functions as intended, add the following meta tag to the head of pages using TinyMCE.

<meta name="viewport" content="width=device-width, initial-scale=1">

Mobile devices now use the silver theme

The mobile experience provided for TinyMCE 4.7 through TinyMCE 5.0 has been deprecated in TinyMCE 5.1.

Legacy mobile experience ( TinyMCE 4.7 through TinyMCE 5.0 )	New mobile experience ( TinyMCE 5.1 + )

To revert to the legacy mobile theme, add the mobile theme to the TinyMCE configuration, such as:

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

Note: No enhancements have been made to the legacy mobile theme. All the changes described in these release notes relate to the silver theme on mobile devices.

For information on:

• Using the silver theme for mobile, see: TinyMCE Mobile.
• Using the legacy mobile theme, see: TinyMCE Mobile - The legacy mobile theme.

Horizontal contextual menus on mobile

Contextual menus are now horizontal on mobile devices and open when a long-press is used. They also side-scroll to allow larger lists of items to be available on mobile devices.

For example:

Side-scrolling toolbars on mobile

Toolbars and horizontal menus side-scroll using “swipe” gestures on mobile devices. This allows longer toolbars to be used without occupying too much screen space. This feature removes the need for a toolbar drawer on mobile devices.

Contextual keyboard settings

A new inputMode configuration setting for dialog input components has been added to provide contextual onscreen keyboards on mobile devices. Dialogs in TinyMCE, the core TinyMCE plugins, and the premium TinyMCE plugins have been updated to use inputMode.

For information on using inputMode, see: Dialog components - inputMode.

New mobile defaults for selected settings

These mobile-specific default values have been set to disable unsupported settings for mobile devices or to provide the best experience without configuration from developers.

The following settings have mobile-specific default values:

• menubar - defaults to false on mobile phones.
• toolbar_drawer - defaults to false on mobile devices. The toolbar will side-scroll by default.
• toolbar_sticky - Sticky Toolbar is not supported on mobile devices and defaults to false.
• table_grid - Table grid is not supported on mobile devices and defaults to false. When creating tables on mobile, a dialog is shown instead of the table grid.
• resize - Resizing is not supported on mobile devices and defaults to false.
• object_resizing - Object resizing is not supported on mobile devices and defaults to false.

Table cell selection on mobile

The table plugin has been updated to provide touch selection handles on touch devices. The touch selection handles appear when users double-tap a table cell, and allow users to select a range of table cells on touch devices.

For example:

Touch-friendly split buttons

The styling on split buttons has been updated to include more padding so they are easier to interact with on touch devices.

Unsupported settings for mobile

The following settings are not supported on mobile devices:

• Inline editing mode.
• Distraction-free editing mode.
• inline.
• toolbar_sticky.
• table_grid.
• resize.
• object_resizing.

Sticky Toolbar

The Sticky Toolbar (or Docking Toolbar) docks the toolbar and the menu to the top of the screen when scrolling down a web page. The sticky toolbar will remain docked until the editor is no longer visible. This allows the menu and toolbar to remain in view when editing large text areas.

For information on the Sticky Toolbars, see: Enabling Sticky Toolbars.

Changes to the Env API for platform detection

New platform detection functions have been added to the Env API, allowing for some older detection properties to be deprecated.

New Env API properties

New Env methods

For a list of deprecated Env APIs, see: Deprecated API Properties - tinymce.Env.

Added new referrer_policy setting

Used for setting the level of referrer information sent when loading plugins and CSS. Referrer policies can be used to:

• Improve the privacy of end-users.
• Assist with server-side filtering of cross-origin requests for TinyMCE resources.

For information on using the referrer_policy setting, see: Integration and setup options - referrer_policy.

Added a dark content css skin

A dark CSS definition for content_css has been added to compliment the dark user interface skin.

For example:

<textarea id="dark-mode">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128" /></p>

  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>

  <h2>Got questions or need help?</h2>

  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>

  <h2>A simple table to play with</h2>

  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

  <h2>Found a bug?</h2>

  <p>
    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
  </p>

  <h2>Finally ...</h2>

  <p>
    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
  </p>
  <p>
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  </p>
</textarea>

tinymce.init({
  selector: 'textarea#dark-mode',
  height: 500,
  menubar: false,
  skin: 'oxide-dark',
  content_css: 'dark',
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table paste code help wordcount'
  ],
  toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help | fullscreen code',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});

For information on using the dark version of the default skin, see: Customizing the editor UI - Skins.

Added border width to Table cell dialog

The table plugin has been updated to include a Border width field in the Cell Properties dialog. The field will accept any valid CSS units.

For example:

Changed the default toolbar_drawer to floating

The default for the toolbar_drawer setting has been changed from false to floating.

To revert to the TinyMCE 5.0 behavior, add toolbar_drawer: false to the tinymce.init, such as:

tinymce.init({
  selection: textarea#myEditor
  toolbar_drawer: false
});

For information on the toolbar_drawer setting, see: User interface options - toolbar_drawer.

Icon changes

In TinyMCE 5.0, the same icon (paragraph) was used for the visualchars and visualblocks menu items and toolbar buttons.

To improve the user experience:

• The paragraph icon has been renamed visualchars and is used for the visualchars toolbar button:
• A new visualblocks icon is used for the visualblocks toolbar button:

For the list of icons included in TinyMCE, see: Available icons.

Fixes to the positioning of inline dialogs and menus

Fixes for inline dialogs and menus have been included to:

• Position inline dialogs correctly when the page is scrolled.
• Reposition inline dialogs and menus when resizing TinyMCE.

Premium Plugin changes

Advanced Code Editor

The TinyMCE 5.1 release includes Advanced Code Editor 2.0.2.

Advanced Code Editor 2.0.2 has been updated to improve performance on mobile devices.

Advanced Tables

A new Advanced Tables premium plugin has been released with TinyMCE 5.1. The Advanced Tables plugin extends the core table plugin by adding sort options for rows and columns.

The plugin is capable of sorting:

• Numerical data
• Text data

Note: Currently, the sort function will treat cells with Alphanumeric data as Text data. This includes currency symbols which are text characters.

For information on this plugin, see:

• The Advanced Tables product page.
• The Advanced Tables Premium features page (including demo).
• The Advanced Tables plugin documentation page.

Checklist

The TinyMCE 5.1 release includes Checklist 1.0.1.

Checklist 1.0.1 includes:

• A fix to allow checklist items to be toggled on an iPad.
• A fix to ensure the checklist toolbar button is toggled when checklist content is selected.

Enhanced Media Embed

The TinyMCE 5.1 release includes Enhanced Media Embed 2.2.4.

Enhanced Media Embed 2.2.4 has been updated to include a touch event listener to allow embedded media to execute on mobile platforms.

Format Painter

The TinyMCE 5.1 release includes Format Painter 1.2.0.

Format Painter 1.2.0 has been updated to support mobile platforms. The Format Painter will now function as expected for mobile users.

This version of Format Painter includes a fix to work with the Legacy Output plugin).

Mentions

The TinyMCE 5.1 release includes Mentions 2.1.0.

Mentions 2.1.0 has been updated to allow for the inclusion of “extra” menu items, such as additional results or search items. For details, see: Mentions - mentions_fetch.

Page Embed

The TinyMCE 5.1 release includes Page Embed 1.0.1.

Page Embed 1.0.1 has been updated to include a touch event listener to allow embedded media to execute on mobile platforms.

PowerPaste

The TinyMCE 5.1 release includes PowerPaste 5.2.0.

Changes to clean paste and Remove Formatting paste

PowerPaste 5.0 included a change to the Remove Formatting functionality to filter out inline style elements (such as strong, b, em, i, and sub), in-line with other editor functionality.

PowerPaste 5.2 reverses the 5.0 change and includes a new powerpaste_clean_filtered_inline_elements setting. This setting accepts a list of inline style elements to be filtered. These inline elements will be filtered on clean or Remove Formatting paste.

To retain the 5.0 default inline style element filter, add the following setting to tinymce.init:

powerpaste_clean_filtered_inline_elements: 'strong,em,b,i,u,strike,sup,sub,font'

For information on powerpaste_clean_filtered_inline_elements, see: PowerPaste - powerpaste_clean_filtered_inline_elements.

Pre-filtering and post-filtering callbacks

PowerPaste 5.2 modifies the pre-filtering and post-filtering callbacks. The callbacks now contain additional data regarding the paste mode and the source of the content.

For information on using the Pre-filtering and Post-filtering callbacks, see: PowerPaste Plugin - Pre-filtering and post-filtering callbacks

Deprecated features

Some API properties have been deprecated in TinyMCE 5.1 to provide an improved solution, or they are no longer required.

Deprecated API Properties - tinymce.Env

New platform detection functions have been added to the Env API, allowing for some older detection properties to be deprecated.

Known issues

This section describes issues that users of TinyMCE 5.1 may encounter, as well as possible workarounds for these issues.

Outline

• Autocompleter and keypress event issues on Android
• Text Patterns plugin: Limited functionality on Android devices
• Spell Checker Pro plugin: Unexpected behavior on Android devices
• UI elements may render behind the keyboard on iOS 12 devices
• UI issue with sidebars on mobile
• Find and replace moving out of view in iOS
• Inline toolbar placement issues on mobile devices
• Touch selection handle issue on iOS
• Text selection context toolbar issue on Android devices
• FormatPainter: Limited functionality on iOS devices

Autocompleter and keypress event issues on Android

Issue

Note: This issue affects the following plugins:

• Mentions.
• Emoticons.
• Character Map.

Plugins relying on the autocompleter API or keypress events do not work on Android. Android intercepts content and processes content prior to insertion into the editor.

Workaround

The only known workaround for the autocompleter at the moment is to press space and then press backspace to trigger the autocompleter to activate.

Text Patterns plugin: Limited functionality on Android devices

Issue

The text pattern plugin will not apply inline patterns if the text pattern is immediately followed by a space on Android devices. The Text Patterns plugin relies on keypress events, which do not work on Android. Android intercepts content and processes content prior to insertion into the editor.

Workaround

Press Enter or Return immediately after entering the text pattern.

Spell Checker Pro plugin: Unexpected behavior on Android devices

Issue

When selecting a correction, the original word will be duplicated and inserted at the selection point. Such as Anddddroid might be replaced with Anddd Andddroid droid.

Workaround

No known workaround at the time of release.

UI elements may render behind the keyboard on iOS 12 devices

Issue

UI elements may be rendered behind the keyboard on iOS 12 devices. This includes, but is not limited to:

• Dialogs.
• Context menus.
• Context toolbars.

This is due to a limitation of Safari on iOS 12. The silver theme relies on the VisualViewport API to determine the area of the page is visible on the device. Unfortunately the VisualViewport API is an experimental feature in iOS 12.

Workaround

To workaround this issue, users can either:

• Upgrade to iOS 13 or later
• Turn on the experimental feature by going to:

Settings > Safari > Advanced > Experimental Features > Visual Viewport API.

UI issue with sidebars on mobile

Issue

Note: This issue affects the Comments plugin.

When opening sidebars on small screens (such as mobile phones), the sidebar may occupy most or all of the text area of the editor.

Workaround

For the comments plugin, the comments sidebar can be collapsed using the showcomments toolbar button ().

For other plugins with sidebars, Tiny recommends ensuring the sidebar’s toolbar button is accessible on the toolbar.

Find and replace moving out of view in iOS

Issue

The Find and replace dialog moves outside the screen view on iOS when finding a match off-screen.

Workaround

No known workaround at the time of release.

Inline toolbar placement issues on mobile devices

Issue

On mobile devices, the inline toolbar can intermittently display in the wrong location when the keyboard is open or when scrolling.

Workaround

No known workaround at the time of release.

Touch selection handle issue on iOS

Issue

The iOS touch selection handles (lollipops) sometimes remain on screen after the selection changes, resulting in misplaced or multiple selections.

Workaround

This may be an iOS bug, and the is no known workaround at the time of release. To remove the duplicate or multiple selections, restart the Safari app.

Text selection context toolbar issue on Android devices

Issue

TinyMCE text selection context toolbars do not appear on Android.

Workaround

No known workaround at the time of release.

Format Painter plugin: Limited functionality on iOS devices

Issue

Unable to apply formats using a collapsed selection on iOS due to iOS selection placement.

Workaround

No known workaround at the time of release.

Upgrading to the latest version of TinyMCE 5

The procedure for upgrading to the latest version of TinyMCE 5 depends on the deployment type.

• Upgrading Tiny Cloud.
• Upgrading TinyMCE Self-hosted manually.

Upgrading Tiny Cloud

Tiny Cloud provides the latest enterprise version of TinyMCE. For information on configuring Tiny Cloud, see: the Cloud deployment guide.

Upgrading TinyMCE Self-hosted manually

To upgrade to TinyMCE 5.10 using a manually downloaded package:

1. Backup the tinymce/ directory so any customizations can be restored after the upgrade.

   Customizations for TinyMCE are typically stored in the following directories:

    tinymce/
    ├── icons/
    ├── langs/
    ├── plugins/
    ├── skins/
    │   ├── content/
    │   └── ui/
    └── themes/
   

2. Download the latest version of TinyMCE.

   • For the TinyMCE Community Version, download tinymce_<VERSION>.zip from Get TinyMCE - Self-hosted releases, where <VERSION> is the latest version of TinyMCE.
   • For the TinyMCE Enterprise Version, download the TinyMCE Enterprise Bundle from Tiny Account > Downloads. The downloaded file will be named enterprise_latest.zip.
3. Extract the downloaded .zip file to a temporary location.
4. (If required) Install the latest language packs from Get TinyMCE - Language Packages.

5. Copy customizations to the new tinymce/ directory. Ensure that only custom changes are added the new tinymce/ directory, such as:

   • Custom icons packs
   • Custom plugins
   • Custom skins
   • Custom themes
6. Delete the existing tinymce/ directory and replace with the new tinymce/.

Note: To simplify the upgrade process to future versions of TinyMCE:

1. Host the TinyMCE customizations outside of the tinymce/ directory.

2. Update your TinyMCE configuration as required:

   • Set the location of content CSS customizations using content_css.
   • Set the location of custom plugins using external_plugins.
   • Set the location of custom icon packages using icons_url instead of icons.
   • Set the location of custom localization packages using language_url instead of language.
   • Set the location of custom skin packages using skin_url instead of skin.
   • Set the location of custom themes using theme_url instead of theme.

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.