tinymce-docs/_includes/release-notes/51new-features.md

The following new features were added to the {{site.productname}} 5.1 version.

Mobile

{{site.productname}} 5.1 provides an improved mobile editor, replacing the existing mobile editor with a touch friendly version on the silver theme.

The new mobile experience comes with a number of user interface changes in addition to the {{site.productname}} "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.

The new mobile experience allows most of the {{site.productname}} plugins to work on mobile devices, except for:

• Comments.
• Image tools.
• MoxieManager.
• Paste.
• Permanent Pen.
• Print.

To ensure the mobile editor functions as intended, add the following meta tag to the head of pages using {{site.productname}}.

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

Note: iPads do not use the mobile part of the {{site.productname}} init configuration. This is due to a constraint added by Apple to return the environment as a "desktop environment" for iPads. iPads users will receive the other changes to touch functionality, such as context toolbars and context menus.

Mobile devices now use the silver theme

The mobile experience provided for {{site.productname}} 4.7 through {{site.productname}} 5.0 has been deprecated in {{site.productname}} 5.1.

Legacy mobile experience ( {{site.productname}} 4.7 through {{site.productname}} 5.0 )	New mobile experience ( {{site.productname}} 5.1 + )

To revert to the legacy mobile theme, add the mobile theme to the {{site.productname}} 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 mobile friendly, with an update to be horizontal on mobile devices. Contextual menus will open when a long-press is used on mobile devices. 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 components has been added to provide contextual onscreen keyboards on mobile devices. Dialogs in {{site.productname}}, the core {{site.productname}} plugins, and the premium {{site.productname}} 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.

To override these mobile defaults, add the setting to the mobile configuration, such as:

tinymce.init({
  selector: 'textarea',
  mobile: {
    menubar: true
  }
});

Table cell selection on mobile

The table plugin has been updated to provide touch selection handles on touch devices. The touch selection handles 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.

Sticky Toolbar

A Sticky Toolbar (or Docking Toolbar), docks the toolbar and the menu to the top of the screen when scrolling down a web page until the editor is no longer visible.

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

General changes

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 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 {{site.productname}} resources.

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

Added a dark content css skin

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

For example:

{% include codepen.html id="dark-mode" %}

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 table Cell dialog. The field will accept any valid CSS length.

For example:

Changed the default toolbar_drawer to floating

The default for the toolbar_drawer setting has been changed from false to floating. For information on the toolbar_drawer setting, see: User interface options - toolbar_drawer.

Icon changes

In {{site.productname}} 5.0, the same icon (paragraph) was used for the toolbar buttons visualchars and visualblocks. 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:

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 {{site.productname}}.

Premium Plugins

PowerPaste

The {{site.productname}} 5.1 release includes PowerPaste 5.2.0.

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

Page Embed

The {{site.productname}} 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.

Format Painter

The {{site.productname}} 5.1 release includes Format Painter 1.2.0.

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

Checklist

The {{site.productname}} 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.

Mentions

The {{site.productname}} 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.