关于移动端

此页更新时间：2020-01-15 14:54

此页英文文档：https://www.tiny.cloud/docs/mobile/

因自5.1.0开始tinymce改变了移动端策略，用PC主题代替了过去的mobile版，所以本页内容适用于5.1.0之后的版本，之前的版本可参考：510之前的mobile版说明

TinyMCE 5.1提供了改进的移动编辑器，我们使用了改进后的silver主题，并增强了触摸体验。

除给移动端带来桌面版的体验外，我们还做了如下改进：

  • 移动设备使用silver主题
  • 移动设备提供水平上下文菜单
  • 移动设备上工具栏侧滑和上下文菜单
  • 对话框可使用 inputMode 来选择弹出的输入法类型
  • 初始化时可设置专为移动端的配置参数
  • 改善表格在触摸中的体验

新的移动端可使用大多数TinyMce插件，但如下插件除外：

  • comments
  • imagetools
  • MoxieManager
  • permanentpen

TinyMCE会自动检测当前设备类型和屏幕尺寸显示最佳UI体验。

注意：iPad不会使用初始化配置中mobile参数部分。这是由于Apple添加的限制，使该环境返回为iPad的“桌面环境”。iPad用户将获得触摸功能的其他更改，例如上下文工具栏和上下文菜单。

支持的移动平台

TinyMCE mobile在4.7+和5版本的TinyMCE中可用。

TinyMce主要设计使用环境为iOS Safari和Android Chrome，TinyMce已在一下平台上经过测试：

系统 浏览器 设备
Android 9,10 Chrome 手机
iOS 12,13 Safari iPhone/iPad

如果您遇到bug，请通过 TinyMCE问题反馈 告诉我们。

配置手机页面

在HTML的head中添加如下内容，以确保移动用户界面按预期运行。

<meta name="viewport" content="width=device-width, initial-scale=1">

要设置移动端的专用配置参数，可以使用mobile参数：

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

部分配置在移动端会变更默认值

部分参数因在移动端无效或为提供更佳的体验，tinyMce会变更他们的值而无需开发人员配置。

以下配置在移动端具有单独的默认值：

  • menubar - 默认为false
  • toolbar_drawer - 默认为false，工具栏将可侧滑动。
  • toolbar_sticky - 默认为false，移动设备不支持固定工具栏。
  • table_grid - 默认为false，移动设备不支持表格网格。
  • resize - 默认为false，移动设备不支持调整大小。
  • object_resizing - 默认为false，移动设备不支持对象调整大小。

移动端不支持的设置

在移动设备中将不支持以下设置：

  • inline.（也就是无法使用内联模式）
  • toolbar_sticky.
  • table_grid.
  • resize.
  • object_resizing.

旧版的手机主题

从TinyMCE 5.1开始，不再推荐使用旧的mobile主题。

但如果你要使用该主题，可通过如下配置实现。

tinymce.init({
  selector: 'textarea',
  mobile: {
    theme: 'mobile'
  }
});
更多关于老版mobile主题的使用可参考：510之前的mobile版说明
▲