---
title: "TinyMCE Mobile"
description: "The TinyMCE rich text editing experience for mobile devices."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/tinymce-for-mobile/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/tinymce-for-mobile/index.md"
version: "5"
last_updated: "2024-04-09T10:06:54Z"
tokens: 1607
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/tinymce-for-mobile/).
# TinyMCE Mobile

> **Important:** 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`](../dialog-components/#inputmode).
- [Mobile defaults for selected settings](#mobiledefaultsforselectedsettings).
- Table cell selection on mobile.

The mobile experience allows most of the TinyMCE plugins to work on mobile devices, except for:

- [Comments](../comments/).
- [Image tools](../editimage/).
- [MoxieManager](../moxiemanager/).
- [Permanent Pen](../permanentpen/).

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

```html
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
```
To set mobile specific settings, add the setting to the [`mobile`](../editor-appearance/#mobile) configuration, such as:

```js
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`](../editor-appearance/#menubar) - defaults to `false` on mobile phones.
- [`toolbar_mode`](../editor-appearance/#toolbar_mode) - defaults to `scrolling` on mobile devices. The toolbar will [side-scroll by default](../editor-appearance/#scrolling).
- [`toolbar_sticky`](../editor-appearance/#toolbar_sticky) - Sticky Toolbar is not supported on mobile devices and defaults to `false`.
- [`table_grid`](../table/#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`](../editor-appearance/#resize) - Resizing is not supported on mobile devices and defaults to `false`.
- [`object_resizing`](../content-behavior-options/#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:

- [Inline editing mode](../use-tinymce-inline/).
- [Distraction-free editing mode](../use-tinymce-distraction-free/).
- [`inline`](../editor-appearance/#inline).
- [`toolbar_sticky`](../editor-appearance/#toolbar_sticky).
- [`table_grid`](../table/#table_grid).
- [`resize`](../editor-appearance/#resize).
- [`object_resizing`](../content-behavior-options/#object_resizing).

## The legacy mobile theme

> **Important:** 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:

```js
tinymce.init({
  mobile: {
    theme: 'mobile'
  }
});
```

### Legacy mobile theme - configuring the plugins

The plugins supported by legacy mobile theme are limited to the [autosave](../autosave/), [autolink](../autolink/), and [lists](../lists/) plugins.

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

```js
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:

```js
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](../lists/) plugin and `styleselect` requires configuring [style_formats](../editor-appearance/#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](../lists/) |  |
| numlist | Insert an ordered list | [lists](../lists/) |  |
| fontsizeselect | Change the font size |  |  |
| forecolor | Apply a foreground color |  |  |
| styleselect | Apply a custom style |  | [style_formats](../editor-appearance/#style_formats) |
| removeformat | Removes any inline formatting |  |  |