TinyMCE Mobile

The dedicated mobile theme, sometimes referred to as the legacy mobile theme was depreacted with the release of TinyMCE 5.1 and will be removed in TinyMCE 6.0. The silver theme was updated in TinyMCE 5.1 to provide an improved mobile experience.

TinyMCE 5.1 introduced an improved mobile editor, replacing the existing mobile editor with a touch friendly version of the silver theme.

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

  • Mobile defaults for selected settings.

  • Table cell selection on mobile.

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 available in TinyMCE versions 4.7+ and 5.

TinyMCE mobile is designed to run on iOS Safari and Android Chrome. TinyMCE mobile is tested on the following platforms:

OS Browser Device

Android 10

Chrome

Mobile phone

Android 11

Chrome

Mobile phone

iOS/iPadOS 13

Safari

iPhone/iPad

iOS/iPadOS 14

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"></meta>

To set mobile specific settings, add the setting to the mobile configuration, such as:

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

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_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 settings for mobile

The following settings are not supported on mobile devices:

The legacy mobile theme

The dedicated mobile theme, sometimes referred to as the legacy mobile theme was depreacted with the release of TinyMCE 5.1 and will be removed in TinyMCE 6.0. The silver theme was updated in TinyMCE 5.1 to provide an improved mobile experience.

The mobile experience provided for TinyMCE 4.7 through TinyMCE 5.0 has been deprecated as of 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'
  }
});

Legacy mobile theme - configuring the plugins

The plugins supported by legacy mobile theme are limited to the autosave, autolink, and lists plugins.

To add these plugins to the legacy mobile theme, add a plugin entry to the mobile section. For example:

tinymce.init({
  selector: 'textarea',
  theme: 'silver',
  mobile: {
    theme: 'mobile',
    plugins: 'autosave lists autolink'
  }
});

Legacy mobile theme - configuring the Toolbar

The legacy TinyMCE theme mobile supports a subset of the toolbar items, which can configured using the mobile: toolbar setting, such as:

tinymce.init({
  selector: 'textarea',
  theme: 'silver',
  mobile: {
    theme: 'mobile',
    plugins: 'autosave lists autolink',
    toolbar: 'undo bold italic styleselect'
  }
});

Below are the toolbar items supported for the legacy mobile theme, and the plugins/configuration required.

The list functions require the lists plugin and styleselect requires configuring style_formats.
Name Function Plugins Required Configuration

undo

Undo operation

redo

Redo operation

bold

Bold formatting operation

italic

Italic formatting operation

underline

Underline formatting operation

link

Insert / Edit a hyperlink

unlink

Remove an existing hyperlink

image

Insert an image

bullist

Insert an unordered list

lists

numlist

Insert an ordered list

lists

fontsizeselect

Change the font size

forecolor

Apply a foreground color

styleselect

Apply a custom style

style_formats

removeformat

Removes any inline formatting