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:
- 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:
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 tofalse
on mobile phones.toolbar_drawer
- defaults tofalse
on mobile devices. The toolbar will side-scroll by default.toolbar_sticky
- Sticky Toolbar is not supported on mobile devices and defaults tofalse
.table_grid
- Table grid is not supported on mobile devices and defaults tofalse
. When creating tables on mobile, a dialog is shown instead of the table grid.resize
- Resizing is not supported on mobile devices and defaults tofalse
.object_resizing
- Object resizing is not supported on mobile devices and defaults tofalse
.
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
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:
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 renamedvisualchars
and is used for thevisualchars
toolbar button: - A new
visualblocks
icon is used for thevisualblocks
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.
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
- 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:
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
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:
-
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/
-
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
.
- For the TinyMCE Community Version, download
- Extract the downloaded
.zip
file to a temporary location. - (If required) Install the latest language packs from Get TinyMCE - Language Packages.
-
Copy customizations to the new
tinymce/
directory. Ensure that only custom changes are added the newtinymce/
directory, such as:- Custom icons packs
- Custom plugins
- Custom skins
- Custom themes
- Delete the existing
tinymce/
directory and replace with the newtinymce/
.
Note: To simplify the upgrade process to future versions of TinyMCE:
- Host the TinyMCE customizations outside of the
tinymce/
directory.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 oficons
.- Set the location of custom localization packages using
language_url
instead oflanguage
.- Set the location of custom skin packages using
skin_url
instead ofskin
.- Set the location of custom themes using
theme_url
instead oftheme
.
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
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.