Important changes to Tiny Cloud pricing > Find out more

TinyMCE Mobile

The TinyMCE rich text editing experience for mobile devices.

Contribute to this page

TinyMCE 5.4 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 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 new 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.

Note: 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. iPads 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 9 Chrome Mobile phone
Android 10 Chrome Mobile phone
iOS 12 Safari iPhone/iPad
iOS 13 Safari iPhone/iPad

Please report platform issues and bugs in the TinyMCE issue tracker.

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

Note: 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    

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.