← 全部文档

从右到左界面

为阿拉伯语、希伯来语、波斯语和乌尔都语用户镜像编辑器自身的界面:工具栏从右侧开始,菜单、对话框、状态栏和缩放角也相应翻转。它改变的是内容周围的编辑器,而不是内容本身。

使用阿拉伯语语言包并镜像了界面的编辑器:工具栏从右边缘的 Bold 开始,阿拉伯文文本右对齐,段落菜单中的阿拉伯语标题名称靠右排列
设置了 rtlUserInterface: true 的阿拉伯语语言包,段落菜单处于打开状态。

启用

该功能由 rtlui.js 插件提供(也包含在 plugins/all_plugins.js 中)。默认情况下,当编辑区域本身是从右到左时,它会镜像界面。要始终镜像,请设置 rtlUserInterface: true。界面文字请加载一个语言包:

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<script src="/richtexteditor/lang/rte-lang-ar.js"></script>

<div id="editor"><p dir="rtl">مرحبا بكم في المحرر.</p></div>
<script>
var editor = new RichTextEditor("#editor", { rtlUserInterface: true });
</script>

它没有工具栏按钮。用户可以在斜杠菜单("Mirror editor for RTL")中切换它,您的页面也可以用下面的 API 切换。

选项

选项默认值作用
rtlUserInterface"auto""auto":当编辑区域计算后的 direction 为 rtl 时镜像。true:始终镜像。false:从不镜像。

"auto" 看的是整个编辑区域,而不是单个段落;带有 dir="rtl" 的段落不算数。有两种方式可以让编辑区域变为从右到左:文本方向插件的 defaultTextDirection: "rtl"(它会在编辑区域上设置 dir="rtl"),或者一个内容样式表:

var editor = new RichTextEditor("#editor", { defaultTextDirection: "rtl" });
// or: new RichTextEditor("#editor", { contentCssText: "body{direction:rtl}" });
editor.isRtlUserInterface(); // true

检查在编辑器启动时以及每次 setHTMLCode() 之后运行。之后用 editor.setBaseDirection("rtl") 改变文档方向时,界面要到下一次 setHTMLCode() 才会镜像;请同时调用 editor.setRtlUserInterface(true)。

API

方法作用
editor.setRtlUserInterface(true)镜像界面(false 则撤销)。返回新的状态。
editor.toggleRtlUserInterface()切换,返回新的状态。editor.execCommand("rtlui") 的作用相同。
editor.isRtlUserInterface()界面处于镜像状态时返回 true。
editor.getRtlUiCss()以字符串形式返回插件添加的 CSS。

会有哪些变化

插件会在编辑器的外层元素(div.richtexteditor)上设置 dir="rtl",并向页面添加一个样式表 <style id="rte-rtl-ui-styles">,其中的所有规则都以 .richtexteditor[dir="rtl"] 开头。未镜像的编辑器不受它的影响。

  • 工具栏、下拉菜单、子菜单和浮动面板都遵循从右到左的方向。下拉菜单和对话框位于编辑器的元素内部,因此它们也会被镜像(已用段落菜单和 Insert Link 对话框验证)。
  • 菜单行、状态栏、标签列表和字数统计都从右侧开始;缩放角移到另一侧。
  • 只有体现阅读顺序的图标才会翻转:增加缩进、减少缩进和子菜单箭头。粗体、斜体和对齐图标保持不变。

注意事项

  • 内容不会改变。文本的方向属于内容,由文本方向插件(textdirection.js)设置;例如 editor.setTextDirection("rtl") 会保存 <p dir="rtl">abc</p>。镜像界面不会向保存的 HTML 添加任何内容。
  • 使用 "auto" 时,setHTMLCode() 会再次检查。在 2.6.12 中,插件会在每次 setHTMLCode() 之后重新应用其设置,因此向 "auto" 编辑器加载新内容时,通过 toggleRtlUserInterface() 或斜杠菜单做出的切换会被撤销。如果您的页面有自己的切换开关,请在创建编辑器时把 rtlUserInterface 设置为 true 或 false。
  • 把 rtlui 放入工具栏字符串会创建一个带有通用图标、名称为 "rtlui" 的按钮,因为 2.6.12 没有为它提供标签或图标。
  • 在阻止 <style> 元素的严格内容安全策略下,插件会通过 CSSOM 重新添加其规则。

相关内容:文本片段语言、无障碍与语言演示、界面语言演示。