适用于移动端的 TinyMCE

TinyMCE 的移动端编辑体验默认启用。它与桌面版本在几个关键方面有所不同，以提供响应式且针对触摸优化的界面：

• 水平和侧向滚动的工具栏和上下文菜单。

• 使用inputMode实现的上下文相关键盘行为。

• 为选定配置选项预先定义的移动特定默认值。

• 根据平台，使用触摸手势访问上下文菜单。

TinyMCE 会自动检测平台，并根据屏幕尺寸和设备类型显示最佳用户界面。

即使配置了自定义的 TinyMCE 上下文菜单，在移动设备上仍可访问原生上下文菜单。在 iOS 上，通过单击即可实现；在 Android 上，则需要双击。如果启用了contextmenu_never_use_native选项，则两个平台均会禁用原生菜单访问。

由于 Apple 的环境限制，iPad 被视为桌面级设备。虽然 mobile 配置在 iPad 上不适用，但上下文工具栏和菜单等触摸交互仍能按预期工作。

当配置了 TinyMCE 上下文菜单时，移动设备上的用户可通过长按访问 TinyMCE 上下文菜单。然而，当未配置 TinyMCE 上下文菜单但配置了 TinyMCE 上下文工具栏时，长按将打开上下文工具栏。

支持的移动平台

TinyMCE 移动端已在 Android 和 iOS 的当前版本或上一个版本的默认浏览器上经过测试，并设计为在这些浏览器上运行。

默认情况下，Google 和 Apple 会自动更新其操作系统和默认浏览器。

同样默认情况下，Android 和 iOS 会自动更新自身，包括补丁、安全修复和次要更新。然而，主要更新——即从一个主要版本到下一个主要版本的操作系统更新——虽会发布，但不会在未经用户或系统管理员输入的情况下安装。

每个操作系统上的默认浏览器也会以类似方式更新，包括补丁、安全修复和次要更新。然而，与操作系统不同，默认浏览器的主要更新——即从一个主要版本到下一个主要版本的默认浏览器更新——默认情况下也会自动安装。

因此，Tiny Technologies, Inc. 仅支持 TinyMCE 移动端在四种受支持的操作系统与浏览器组合的最新版本上运行。

也就是说，TinyMCE 移动端支持以下组合：

• Android 当前版本的最新发布与适用于 Android 当前版本的 Chrome 的最新发布相结合；

• Android 上一个版本的最新发布与适用于 Android 上一个版本的 Chrome 的最新发布相结合。

• iOS 当前版本的最新发布与适用于 iOS 当前版本的 Safari 的最新发布相结合。

• iOS 上一个版本的最新发布与适用于 iOS 上一个版本的 Safari 的最新发布相结合。

然而，TinyMCE 移动端不支持任何移动操作系统或其默认浏览器的测试版或其他预发布版本。

移动端插件限制

某些插件在移动设备上使用时功能受限或不受支持，尤其是在内联模式下。

已知插件限制

移动端不受支持的插件

配置移动行为

为确保 TinyMCE 移动用户界面正常运行，请在 HTML 的 <head> 中包含以下 meta 标签：

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

若要自定义在移动设备上的行为，请使用 mobile 配置选项。例如：

tinymce.init({
  selector: 'textarea',  // Adjust this value to match your HTML
  mobile: {
    menubar: true
  }
});

移动端专用默认设置

以下选项会自动设置，以便在移动设备上提供更好的体验：

• menubar — 在移动电话上默认值为 false。

• toolbar_mode — 默认值为 scrolling；启用可横向滚动的工具栏。

• toolbar_sticky — 默认值为 false；不支持固定工具栏。

• table_grid — 默认值为 false；用对话框替代表格网格。

• resize — 默认值为 false；禁用编辑器内调整大小功能。

• object_resizing — 默认值为 false；不支持对象大小调整。

不支持的配置选项

以下配置选项在移动设备上不适用或不起作用：

• toolbar_sticky

• table_grid

• resize

• object_resizing

mobile 选项

此选项允许指定一种替代配置，该配置将专门覆盖移动设备的其他选项。有关为移动设备自定义 TinyMCE 的信息，请参阅：TinyMCE 移动端。

类型： Object

移动端专用配置示例

此示例展示了如何设置一个移动部分，用移动端专用设置覆盖部分桌面端设置。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'code lists',
  mobile: {
    menubar: true,
    plugins: 'autosave lists autolink',
    toolbar: 'undo bold italic styles'
  }
});