TinyMCE Mobile

A new mobile-first user experience for rich text editing.

Why make TinyMCE mobile friendly? Simple. We live in a "mobile-first" world and expect a seamless experience between desktop and mobile. Our goal is to help you achieve this with as little effort as possible.

We're pleased to introduce TinyMCE mobile, available in version 4.7.

TinyMCE mobile is designed to run on iOS Safari and Android Chrome. You'll find a streamlined interface while keeping the most common touch interactions easily to hand.

Configuration is relatively easy, so let's get started.

Note: Please note that TinyMCE mobile will not work on non-mobile environments.

How to set up mobile

In the snippet below, we use TinyMCE Cloud to instantiate the editor. If you're using the Self-hosted package, replace cdn.tiny.cloud/1/no-api-key/tinymce/4/ with your path to tinymce.min.js.

<!DOCTYPE html>
<html>
<head><!-- Get TinyMCe Cloud -->
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/4/tinymce.min.js"></script>
  <script>tinymce.init({
      selector:'textarea',
      theme: 'modern',
      mobile: { theme: 'mobile' }
    });</script>
</head>
<body>
  <textarea>Now go get a free trial of our Premium Plugins!</textarea>
</body>
</html>

Note: If you're new to TinyMCE Cloud, this post will help you get the editor instantiated quickly.

Tip: Don't forget to add your API key to the init: <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/4/tinymce.min.js?apiKey=your_API_key"></script>

If you have experience using TinyMCE, you'll see in the above example that we added a new parameter called mobile. To use mobile mode on touch-only devices, add this to your editor settings, specifying the theme as mobile:

tinymce.init({
  selector: 'textarea',
  theme: 'modern',
  mobile: {
    theme: 'mobile'
  }
});

The example above loads default settings. To configure the mobile experience, continue to the section Configuring mobile below.

Important: do not set theme to mobile in the top-level of your init settings, as it will attempt to load mobile mode on desktop environments as well.

Configuring mobile

One way to think about configuring TinyMCE mobile is that it is a subset of config options within your standard tinymce init. When on a mobile device, anything included in the mobile section will be used instead of the equivalent values in the top-level of settings of your config.

Therefore, the mobile section allows you to have completely different settings for mobile than non-mobile devices. The main configuration options you can change are plugins and toolbar.

Configuring the Plugins

The plugins supported by mobile are currently limited to the autosave, autolink and lists plugins. This is by design. We are in the early release cycle and want to hear from our developer community about which plugins should be mobile optimized. Please complete our survey to have your say.

Specify which of these plugins you want by adding a plugin entry to the mobile section:

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

Configuring the Toolbar

TinyMCE mobile supports a small subset of the toolbar items supported by the main mode. The toolbar is specified in the mobile section also.

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

Below are the toolbar items currently supported, with any plugins/configuration required. Note, that 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

Browser compatibility

During our initial QA, we tested mobile on the following platforms. If you use other platforms and encounter bugs, please let us know in the TinyMCE issue tracker.

Mobile Platform Compatibility

OS	Browser	Device
Android 8	Chrome	Mobile phone
Android 7	Chrome	Mobile phone
Android 6	Chrome	Mobile phone
iOS11	Safari	iPhone/iPad
iOS10	Safari	iPhone/iPad

To shape the future of mobile editing, complete our survey to have your say.

Was this article helpful? Yes - No

Well, that's awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

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.