TinyMCE 5.1

Overview

TinyMCE 5.1 was released for TinyMCE Enterprise and Tiny Cloud on Wednesday, December 11th, 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:

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:

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

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 + )

TinyMCE legacy mobile experience

TinyMCE 5.1+ mobile experience

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

tinymce.init({
  mobile: {
    theme: 'mobile'
  }
});
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:

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:

Example of the side-scrolling toolbar and contextual toolbar

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 selector handles for selecting multiple table cells

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:

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.

Sticky Toolbar animation

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

Property Type Description

browser.current

String

Returns the current browser name.

browser.version

Object

Returns the current browser major and minor version.

os.current

String

Returns the current operating system name.

os.version

Object

Returns the current operating system major and minor version.

New Env methods

Method Type Description

browser.isEdge

Boolean

Returns true if the user’s browser is Microsoft Edge.

browser.isChrome

Boolean

Returns true if the user’s browser is Google Chrome.

browser.isIE

Boolean

Returns true if the user’s browser is Microsoft Internet Explorer.

browser.isOpera

Boolean

Returns true if the user’s browser is Opera.

browser.isFirefox

Boolean

Returns true if the user’s browser is Firefox.

browser.isSafari

Boolean

Returns true if the user’s browser is Safari.

os.isWindows

Boolean

Returns true if the user’s operating system is Microsoft Windows.

os.isiOS

Boolean

Returns true if the user’s operating system is iOS.

os.isAndroid

Boolean

Returns true if the user’s operating system is Android.

os.isOSX

Boolean

Returns true if the user’s operating system is Mac OS X.

os.isLinux

Boolean

Returns true if the user’s operating system is Linux.

os.isSolaris

Boolean

Returns true if the user’s operating system is Solaris.

os.isFreeBSD

Boolean

Returns true if the user’s operating system is FreeBSD.

deviceType.isDesktop

Boolean

Returns true if the user’s device is a desktop device.

deviceType.isiPad

Boolean

Returns true if the user’s device is an iPad.

deviceType.isiPhone

Boolean

Returns true if the user’s device is an iPhone.

deviceType.isPhone

Boolean

Returns true if the user’s device is a phone.

deviceType.isTablet

Boolean

Returns true if the user’s device is a tablet.

deviceType.isTouch

Boolean

Returns true if the user’s device is a touch device.

deviceType.isWebView

Boolean

Returns true if the user’s device is a WebView device.

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:

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<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:

Cell Properties Dialog with new Border Width field

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: <code>paragraph</code> renamed to <code>visualchars</code>

  • A new visualblocks icon is used for the visualblocks toolbar button: New visualblocks icon

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

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:

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.

Deprecated Property Alternative Property / Reason for Deprecation Type Original Description

opera

Use browser.isOpera() instead.

Boolean

Constant that is true if the browser is Opera.

webKit

Use browser.isSafari() or browser.isChrome() instead.

Boolean

Constant that is true if the browser is WebKit (Safari/Chrome).

ie

Use browser.version.major and browser.isIE() or browser.isEdge() instead.

Number

Constant that is greater than zero if the browser is IE.

gecko

Use browser.isFirefox() instead.

Boolean

Constant that is true if the browser is Gecko.

mac

Use os.isOSX() or os.isiOS() instead.

Boolean

Constant that is true if the operating system is Mac OS.

iOS

Use os.isiOS() instead.

Boolean

Constant that is true if the operating system is iOS.

android

Use os.isAndroid() instead.

Boolean

Constant that is true if the operating system is android.

desktop

Use deviceType.isDesktop() instead.

Boolean

Constant that is true if the browser is running on a desktop device

contentEditable

All supported browsers now support content editable elements.

Boolean

Constant that is true if the browser supports editing.

caretAfter

All supported browsers now support placing carets after inline blocks.

Boolean

Returns true/false if the browser can or can’t place the caret after a inline block like an image.

range

All supported browsers now support native DOM ranges.

Boolean

Constant that is true if the browser supports native DOM Ranges. IE 9+.

ceFalse

All supported browsers now support contentEditable=false regions.

Boolean

Constant that is true if the browser supports contentEditable=false regions.

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

Issue

This issue affects the following plugins:

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

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 (comment.svg).

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

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/.

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.