← 全部文档
移动端

启用移动端工具栏模式

一个可选启用的样式表，为手机和以触控为主的设备调整编辑器外观。无需修改编辑器标记——完全由 CSS 驱动，并限定在窄视口媒体查询之内，因此桌面布局保持不变。

启用

为任意编辑器容器添加 rte-mobile 类，并引入 rte_mobile.css：

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<link rel="stylesheet" href="/richtexteditor/rte_mobile.css" />

<div id="editor" class="rte-mobile"></div>

使用 ASP.NET Core 标记帮助程序时，只需设置 enable-mobile-toolbar="true"——它会替您输出 link 标签并添加该类。

<richtextbox asp-for="Body" toolbar="full"
             enable-mobile-toolbar="true" />

会有哪些变化

  • 44×44 的点击目标——符合 WCAG 2.5.6 目标尺寸要求。
  • 可水平滚动的工具栏——不换行，不占用纵向空间，边缘带渐隐效果作为可滚动提示。
  • 固定工具栏——始终停留在虚拟键盘上方。
  • 底部弹出式下拉菜单——字体、颜色、插入菜单以从底部滑出的面板呈现，而不会被屏幕边缘截断。
  • 全宽对话框——链接、图片、Ask AI 对话框左右两侧保留 8px 的安全区边距。
  • 从底部滑出的审阅抽屉——批注/修订抽屉从底部向上滑出，而不是从右侧。
  • 禁用浮动段落工具栏——它会与 iOS 键盘冲突。
  • 16px 的内容字号——防止点击进入编辑器时 iOS 自动放大页面。

所有规则都限定在以下范围内：

@media (max-width: 768px), (pointer: coarse) {
    .rte-mobile .rte-toolbar { /* ... */ }
    /* ... */
}

因此，在生产代码中保留这个类也没有任何害处——桌面视口不会应用任何移动端专用规则。

全站默认

对于每个编辑器都以手机为主的管理后台应用，只需在 <body> 上添加一次该类：

<body class="rte-mobile">
    ...
</body>

它会作用于页面上的每个编辑器，无需为每个实例单独设置属性。