当前位置: 首页 > 文档资料 > tinyMCE 帮助文档 >

TinyMCE Mobile

优质
小牛编辑
131浏览
2023-12-01

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

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.

Configuring mobile

New to Tiny 5, the mobile experience is built in and does not require additional configuration.

Tinymce will detect the platform and will show an optimal UI experience given a device type and screensize.

Configuring the Plugins

The plugins supported by mobile are currently limited to the autosave, autolink, and lists plugins. This is by design. TinyMCE Mobile is in the early release cycle and does not include all the plugins available in the desktop version. The developer community is encouraged to provide suggestions about which plugins should be mobile optimized. Please complete this survey to provide feedback.

Specify which of the plugins should be added by adding a plugin entry to the mobile section as shown in the following example:

tinymce.init({
  selector: 'textarea',
  theme: 'silver',
  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.

tinymce.init({
  selector: 'textarea',
  theme: 'silver',
  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: The list functions require the lists plugin and styleselect requires configuring style_formats.

NameFunctionPlugins RequiredConfiguration
undoUndo operation  
redoRedo operation  
boldBold formatting operation  
italicItalic formatting operation  
underlineUnderline formatting operation  
linkInsert / Edit a hyperlink  
unlinkRemove an existing hyperlink  
imageInsert an image  
bullistInsert an unordered listlists 
numlistInsert an ordered listlists 
fontsizeselectChange the font size  
forecolorApply a foreground color  
styleselectApply a custom style style_formats
removeformatRemoves 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

OSBrowserDevice
Android 8ChromeMobile phone
Android 7ChromeMobile phone
Android 6ChromeMobile phone
iOS11SafariiPhone/iPad
iOS10SafariiPhone/iPad

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