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:

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 to false on mobile phones.

  • toolbar_mode - defaults to scrolling 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.

Unsupported options for mobile

The following options are not supported on mobile devices:

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'
  }
});