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

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 重新添加其规则。