This option allows you specify an alternative config that will extend the existing desktop config when the editor is loaded on a mobile device. This gives you the flexibility to override settings specifically for [mobile]({{ site.baseurl }}/mobile) and really customize the mobile experience.
This option allows you specify an alternative configuration for mobile devices. This setting allows for overriding settings specifically for mobile devices. For information on customizing {{site.productname}} for mobile devices, see: [{{site.productname}} mobile]({{ site.baseurl }}/mobile/).
**Type:** `Object`
##### Example of mobile specific config
##### Example of mobile specific configuration
This example shows how to setup a mobile section override some of the desktop settings with [mobile]({{ site.baseurl }}/configure/editor-appearance/#mobile) specific settings.
This example shows how to setup a mobile section to override some of the desktop settings with mobile specific settings.
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.
{{site.requires_5_1v}}
**Type:** `String`
**Default Value:** `''`
For a list of valid referrer policies (directives), see: [MDN Web Docs - Referrer-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy).
##### Example
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
@ -4,16 +4,20 @@ The `toolbar_drawer` option is used to add an additional toolbar to accommodate
Use the [toolbar]({{site.baseurl}}/configure/editor-appearance/#toolbar) option to specify the buttons and the order that they will appear in the extended toolbars. To create groups within this list, please add `|` pipe characters between the configured groups of controls.
**Type: String**
> **Note:** The toolbar drawer is not available when using [multiple toolbars]({{site.baseurl}}/configure/editor-appearance/#usingmultipletoolbars) or the [toolbar(n)]({{site.baseurl}}/configure/editor-appearance/#toolbarn) option.
## Settings
**Type:** `String`
The drawer settings have to be specified in the `tinymce.init` at the time of configuring the `toolbar_drawer` option. There are two types of drawer settings - _floating_ and _sliding_.
**Default Value:** `floating`
**Possible Values:** `false`, `'floating'`, or `'sliding'`
{{site.differs_for_mobile}}
## Settings
The drawer settings have to be specified in the `tinymce.init` at the time of configuring the `toolbar_drawer` option. There are two types of drawer settings - _floating_ and _sliding_.
### Floating
If the `toolbar_drawer` is configured to `floating`, the toolbar appears under the `toolbar_drawer` icon in a floating shelf format when the `toolbar_drawer` icon  is clicked.
{{site.cloudname}} provides the latest enterprise version of {{site.productname}}. For information on configuring {{site.cloudname}}, see: [the Cloud deployment guide]({{site.baseurl}}/cloud-deployment-guide/).
### Upgrading TinyMCE Self-hosted using a package manager
Select from the following package managers.
* [Yarn](#yarn)
* [npm](#npm)
@ -12,40 +17,62 @@ Select from the following package managers
* [NuGet](#nuget)
* [Bower](#bower)
##### Yarn
To upgrade TinyMCE using Yarn, run:
#### Yarn
To upgrade to {{site.productname}} {{site.releaseversion}} using Yarn, run:
```sh
$ yarn upgrade tinymce
$ yarn upgrade {{site.prodnamecode}}
```
##### npm
To upgrade TinyMCE using npm, run:
#### npm
To upgrade to {{site.productname}} {{site.releaseversion}} using npm, run:
```sh
$ npm install tinymce@latest --save
$ npm install {{site.prodnamecode}}@latest --save
```
##### Composer
To upgrade TinyMCE using Composer, run:
#### Composer
To upgrade to {{site.productname}} {{site.releaseversion}} using Composer, run:
language -> /colanguagenfigure/localization/#language_url
skin -> /configure/editor-appearance/#skin_url
theme -> /configure/editor-appearance/#theme_url
1. Download the latest version of {{site.productname}}.
TinyMCE Community Version
* For the {{site.productname}} Community Version, download `{{site.prodnamecode}}_<VERSION>.zip` from [Get {{site.productname}} - Self-hosted releases](https://www.tiny.cloud/get-tiny/self-hosted/), where _`<VERSION>`_ is the latest version of {{site.productname}}.
* For the {{site.productname}} Enterprise Version, download the **{{site.productname}} Enterprise Bundle** from [My Account > Downloads](https://www.tiny.cloud/my-account/downloads/). The downloaded file will be named `enterprise_latest.zip`.
TinyMCE Enterprise Version
1. (If required) Download updated language packs from [Get {{site.productname}} - Language Packages](https://www.tiny.cloud/get-tiny/language-packages/).
1. Extract the downloaded `.zip` file for deployment.
My Account > Downloads > TinyMCE Enterprise Bundle
The new mobile experience comes with a number of user interface changes in addition to the {{site.productname}} "desktop" experience:
> 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.
* [Horizontal contextual menus on mobile]
#### 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**<br/>( {{site.productname}} 4.7 through {{site.productname}} 5.0 ) | **New mobile experience**<br/>( {{site.productname}} 5.1 + ) |
To revert to the legacy mobile theme, add the mobile theme to the {{site.productname}} configuration, such as:
@ -40,6 +50,8 @@ tinymce.init({
});
```
> **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]({{site.baseurl}}/mobile/).
* Using the legacy `mobile` theme, see: [TinyMCE Mobile - The legacy mobile theme]({{site.baseurl}}/mobile/#thelegacymobiletheme).
@ -47,6 +59,8 @@ For information on:
#### 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](#side-scrollingtoolbarsonmobile) to allow larger lists of items to be available on mobile devices.
For example:
<imgalt="Example of the side-scrolling toolbar and contextual toolbar"src="{{site.baseurl}}/images/side-scrolling-context-toolbar.png"style="display:block;margin-left:auto;margin-right:auto;max-width:50%;border: 1px solid #036DD5"/>
#### Side-scrolling toolbars on mobile
@ -80,15 +94,16 @@ tinymce.init({
});
```
#### Touch-friendly split buttons
* Added additional padding to split button chevrons on touch devices, to make them easier to interact with TINY-4223 mobile UI improvement
#### Table cell selection on mobile
TinyMCE 5.1
* Added touch selector handles for table selections on touch devices TINY-4097 mobile Table multicell selection using selectors
The [table plugin]({{site.baseurl}}/plugins/table/) 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.
> 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.
#### Touch-friendly split buttons
The styling on [split buttons]({{site.baseurl}}/ui-components/typesoftoolbarbuttons/#splitbutton) has been updated to include more padding so they are easier to interact with on touch devices.
### Sticky Toolbar
@ -96,7 +111,7 @@ A Sticky Toolbar (or Docking Toolbar), docks the toolbar and the menu to the top
For information on the Sticky Toolbars, see: [Enabling Sticky Toolbars]({{site.baseurl}}/configure/editor-appearance/#toolbar_sticky).
### Minor changes
### General changes
#### Changes to the Env API for platform detection
New platform detection functions have been added to the [`Env` API]({{site.baseurl}}/api/tinymce/tinymce.env/), allowing for some older detection properties to be deprecated.
@ -138,38 +153,44 @@ New platform detection functions have been added to the [`Env` API]({{site.baseu
For a list of deprecated `Env` APIs, see: [Deprecated API Properties - `tinymce.Env`](#deprecatedapiproperties-tinymceenv).
#### Added new `referrer_policy` setting
* added new referrer_policy setting to add the referrerpolicy attribute when loading scripts or stylesheets.
Used for setting the level referrer information sent when loading plugins and CSS. Referrer policies can be used to:
#### Added a dark TinyMCE skin
* added a dark content_css skin to go with the dark UI skin.
Enable dark mode in TinyMCE
There are two ways to enable dark mode in TinyMCE.
* 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`]({{site.baseurl}}/configure/integration-and-setup/#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:
You can initialize the editor with the following settings:
```
skin: "oxide-dark",
content_css: "dark"
```
Alternatively, you can initialize the mode depending on the user’s preference as specified in the operating system:
For information on using the dark version of the default skin, see: [Customizing the editor UI - Skins]({{site.baseurl}}/general-configuration-guide/customize-ui/#skins).
#### Added border width to Table cell dialog
* Added border width field to Table Cell dialog TINY-4028 gen any css value
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](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Lengths).
For example:
<imgalt="Cell Properties Dialog with new Border Width field"src="{{site.baseurl}}/images/border-width-cell-props.png"style="display:block;margin-left:auto;margin-right:auto;max-width:50%;border: 1px solid #036DD5"/>
#### Changed the default `toolbar_drawer` to `floating`
* Changed default setting for `toolbar_drawer` to `floating` TINY-3634 gen docs and info to revert (was false)
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`]({{site.baseurl}}/configure/editor-appearance/#toolbar_drawer).
#### Icon changes
* Changed visualblocks toolbar button icon  and renamed `paragraph`  icon to `visualchars` TINY-4074 UI change button to show invisibles icon updated
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:
#### Fixes to positioning of inline dialogs and menus
* Fixed inline dialogs positioning incorrectly when the page is scrolled TINY-4018 positioning of dialogs and menus improved
* Fixed inline dialogs and menus not repositioning when resizing TINY-3227 positioning of dialogs and menus improved
* Position inline dialogs correctly when the page is scrolled.
* Reposition inline dialogs and menus when resizing {{site.productname}}.
These Release Notes provide a high-level coverage of: improvements and additions, known issues, important bug fixes & deprecated functionality associated with the release of {{site.productname}} 5.1.
### Get {{site.productname}} 5.1
{{site.productname}} 5.1 can be deployed by the Tiny Cloud using a Tiny Cloud API key, or {{site.productname}} can be self-hosted.
@ -14,12 +14,23 @@ This section is about customizing TinyMCE's user interface with skins, toolbar b
### Skins
Skins control the appearance of TinyMCE such as colors and spacing. The default skin is called **Oxide** and has a `light` and a `dark` version. The default skin is `oxide`. To get the dark version, use the following config:
Skins control the appearance of TinyMCE such as colors and spacing. The default skin is called **Oxide** and has a `light` and a `dark` version. The default skin is `oxide`. To initialize the editor with the dark version of the default skin, use the following configuration:
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
skin: 'oxide-dark'
skin: 'oxide-dark',
content_css: 'dark' // {{site.requires_5_1v}}
});
```
To base the skin version on the user’s preference as specified in their operating system, use:
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
@ -78,7 +89,7 @@ The editable area can also automatically resize itself as the user enters conten
### Customizing the editable area with content_css
Use the [`content_css`]({{ site.baseurl }}/configure/content-appearance/#content_css) customization option to ensure that TinyMCE's editable area has the same styling as the surrounding content.
Use the [`content_css`]({{ site.baseurl }}/configure/content-appearance/#content_css) customization option to ensure that TinyMCE's editable area has the same styling as the surrounding content.
Use the same `css` file that controls the look and style of the content TinyMCE is integrated into in this setting. The following example includes the file `mycontent.css` in all of the pages to control the site's global appearance. This example ensures the content in the editable area contains the same style as the site.
@ -99,7 +110,7 @@ See the [content_css]({{ site.baseurl }}/configure/content-appearance/#content_c
### Hiding the status bar
The status bar is the gray bar aligned to the bottom of the editor's editable area. The status bar contains the path information and the resize handle. Removing the status bar disables the ability for users to change the size of the editable area.
The status bar is the gray bar aligned to the bottom of the editor's editable area. The status bar contains the path information and the resize handle. Removing the status bar disables the ability for users to change the size of the editable area.
#### Example
@ -130,7 +141,7 @@ tinymce.init({
All of the buttons disappear after the `code` button is added to the toolbar and a new menu called `Tools` with the menu item `Source code` is created. (See [this page]({{ site.baseurl }}/quick-start/) for a basic HTML code block.)
#### Example
#### Example
The following example displays the default toolbar in addition to the `code` functionality:
TinyMCE 5 does not support browsers running in Quirks or backward compatibility modes.
#### Deprecated Editor settings
New platform detection functions were to the [`Env` API]({{site.baseurl}}/api/tinymce/tinymce.env/) for {{site.productname}} 5.1, allowing for some older detection properties to be deprecated.
| Deprecated Property | Alternative Property / Reason for Deprecation | Type | Original Description |
| `opera` | Use [`browser.isOpera()`]({{site.baseurl}}/api/tinymce/tinymce.env/#browserisopera) instead. | Boolean | Constant that is `true` if the browser is Opera. |
| `webKit` | Use [`browser.isSafari()`]({{site.baseurl}}/api/tinymce/tinymce.env/#browserissafari) or [`browser.isChrome()`]({{site.baseurl}}/api/tinymce/tinymce.env/#browserischrome) instead. | Boolean | Constant that is `true` if the browser is WebKit (Safari/Chrome). |
| `ie` | Use [`browser.version.major`]({{site.baseurl}}/api/tinymce/tinymce.env/#browserversionmajor) and [`browser.isIE()`]({{site.baseurl}}/api/tinymce/tinymce.env/#browserisie) or [`browser.isEdge()`]({{site.baseurl}}/api/tinymce/tinymce.env/#browserisedge) instead. | Number | Constant that is greater than zero if the browser is IE. |
| `gecko` | Use [`browser.isFirefox()`]({{site.baseurl}}/api/tinymce/tinymce.env/#browserisfirefox) instead. | Boolean | Constant that is `true` if the browser is Gecko. |
| `mac` | Use [`os.isOSX()`]({{site.baseurl}}/api/tinymce/tinymce.env/#osisosx) or [`os.isiOS()`]({{site.baseurl}}/api/tinymce/tinymce.env/#osisios) instead. | Boolean | Constant that is `true` if the operating system is Mac OS. |
| `iOS` | Use [`os.isiOS()`]({{site.baseurl}}/api/tinymce/tinymce.env/#osisios) instead. | Boolean | Constant that is `true` if the operating system is iOS. |
| `android` | Use [`os.isAndroid()`]({{site.baseurl}}/api/tinymce/tinymce.env/#osisandroid) instead. | Boolean | Constant that is `true` if the operating system is android. |
| `desktop` | Use [`deviceType.isDesktop()`]({{site.baseurl}}/api/tinymce/tinymce.env/#devicetypeisdesktop) 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. |
## Themes
Most themes provided with TinyMCE 4 have been removed from TinyMCE 5 and are now combined in a new responsive theme called **Silver**. The `Silver` theme is enabled by default and contains a set of configurable UI components that can be used to replace the functionality of the TinyMCE 4 themes: Modern, Inline, and Inlite.
@ -164,7 +186,7 @@ The [Modern]({{site.url}}/docs-4x/themes/modern/) theme has been removed from Ti
### Mobile theme
The TinyMCE 4 [Mobile theme]({{site.baseurl}}/mobile/) is the default behavior for the editor when it is loaded on a mobile device.
The {{site.productname}} 4 [Mobile theme]({{site.baseurl}}/mobile/#thelegacymobiletheme) was deprecated in {{site.productname}} 5.1. The mobile-optimized editor is loaded on mobile devices. For information on the new mobile experience, see: [{{site.productname}} mobile}]({{site.baseurl}}/mobile/).
@ -6,9 +6,28 @@ description: A new mobile-first user experience for rich text editing.
keywords: mobile tablet
---
{{site.productname}} mobile is designed to run on iOS Safari and Android Chrome.
{{site.productname}} 5.1 provides an improved mobile editor, replacing the existing mobile editor with a touch friendly version on the silver theme.
> Note: Please note that {{site.productname}} mobile will not work on non-mobile environments.
> 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.
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 and contextual menus on mobile.
* Contextual keyboard settings for dialogs using [`inputMode`]({{site.baseurl}}/ui-components/dialogcomponents/#inputmode).
* [Mobile defaults for selected settings](#mobiledefaultsforselectedsettings).
* Table cell selection on mobile.
The new mobile experience allows most of the {{site.productname}} plugins to work on mobile devices, except for:
> 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.
New to Tiny 5, the mobile experience is built in and does not require additional configuration.
### 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.
Tinymce will detect the platform and will show an optimal UI experience given a device type and screen size.
### Configuration settings with mobile defaults
Some settings have been updated to include a default value for mobile devices:
The following settings have mobile-specific default values:
* [`menubar`]({{site.baseurl}}/configure/editor-appearance/#menubar) - defaults to `false` on mobile phones.
* [`toolbar_drawer`]({{site.baseurl}}/configure/editor-appearance/#toolbar_drawer) - defaults to `false` on mobile devices.
* [`toolbar_drawer`]({{site.baseurl}}/configure/editor-appearance/#toolbar_drawer) - defaults to `false` on mobile devices. The toolbar will [side-scroll by default](#sidescrollingtoolbarsonmobile).
* [`toolbar_sticky`]({{site.baseurl}}/configure/editor-appearance/#toolbar_sticky) - Sticky Toolbar is not supported on mobile devices and defaults to `false`.
* [`table_grid`]({{site.baseurl}}/plugins/table/#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`]({{site.baseurl}}/configure/editor-appearance/#resize) - Resizing is not supported on mobile devices and defaults to `false`.
* [`object_resizing`]({{site.baseurl}}/configure/advanced-editing-behavior/#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:
```js
tinymce.init({
selector: 'textarea',
mobile: {
menubar: true
}
});
```
## The legacy mobile theme
The mobile experience provided for {{site.productname}} 4.7 through {{site.productname}} 5.0 has been deprecated in {{site.productname}} 5.1.
Tyler Kelly
6 years ago