TinyMCE for touch-enabled and mobile devices
The mobile experience for TinyMCE is enabled by default and has the following differences when compared to the "desktop" experience:
-
Horizontal contextual menus on mobile.
-
Side-scrolling toolbars and contextual menus on mobile.
-
Contextual keyboard options for dialogs using
inputMode
.
The mobile experience allows most of the TinyMCE plugins to work on mobile devices, except for:
TinyMCE will detect the platform and show an optimal UI experience based on the device type and screen size.
iPads do not use the mobile part of the TinyMCE init configuration. This is due to a constraint added by Apple to return the environment as a "desktop environment" for iPads. iPad users will receive the other changes to touch functionality, such as context toolbars and context menus.
|
Supported Mobile Platforms
TinyMCE mobile is designed to run on iOS Safari and Android Chrome. TinyMCE mobile is tested on the following platforms:
OS | Browser | Device |
---|---|---|
Android 11 |
Chrome |
Mobile phone |
Android 12 |
Chrome |
Mobile phone |
iOS/iPadOS 14 |
Safari |
iPhone/iPad |
iOS/iPadOS 15 |
Safari |
iPhone/iPad |
Configuring mobile
Add the following meta
tag to the head
of pages using TinyMCE to ensure the mobile user interface functions as intended.
<meta name="viewport" content="width=device-width, initial-scale=1">
To set mobile specific options, add the option to the mobile
option configuration, such as:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
mobile: {
menubar: true
}
});
Mobile defaults for selected options
These mobile-specific default values have been set to disable unsupported options for mobile devices or to provide the best experience without configuration from developers.
The following options have mobile-specific default values:
-
menubar
- defaults tofalse
on mobile phones. -
toolbar_mode
- defaults toscrolling
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
.
The mobile
option
This option allows an alternative configuration to be specified that will override other options specifically for mobile devices. For information on customizing TinyMCE for mobile devices, see: TinyMCE mobile.
Type: Object
Example of mobile specific configuration
This example shows how to setup a mobile section to override some of the desktop settings with mobile specific settings.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'code lists',
mobile: {
menubar: true,
plugins: 'autosave lists autolink',
toolbar: 'undo bold italic styles'
}
});