右から左のインターフェース

アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語の利用者向けに、エディターのインターフェースを左右反転します。ツールバーは右から並び、メニュー、ダイアログ、ステータスバー、サイズ変更の隅も反転します。変わるのはコンテンツ周囲のエディター UI で、コンテンツ自体ではありません。

アラビア語の言語パックで左右反転したエディター。ツールバーは右端の Bold から始まり、アラビア語の本文は右揃えで、段落メニューにも右揃えのアラビア語の見出し名が並んでいます — アラビア語の言語パックと `rtlUserInterface: true` を使い、段落メニューを開いた状態です。

有効にする

この機能は rtlui.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。既定では、編集領域自体が右から左の場合に UI を反転します。常に反転するには 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" を設定します）と、コンテンツ用スタイルシートの 2 つです。

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

確認は、エディターの起動時と各 setHTMLCode() の後に行います。後から editor.setBaseDirection("rtl") で文書の方向を変えた場合、UI の反転は次の setHTMLCode() まで行われません。同時に editor.setRtlUserInterface(true) を呼び出してください。

API

メソッド	動作
`editor.setRtlUserInterface(true)`	左右反転します（`false` で解除します）。新しい状態を返します。
`editor.toggleRtlUserInterface()`	切り替えて、新しい状態を返します。`editor.execCommand("rtlui")` も同じ動作です。
`editor.isRtlUserInterface()`	インターフェースが反転していれば `true` です。
`editor.getRtlUiCss()`	プラグインが追加する CSS を文字列で返します。

変わる部分

エディターの外側の要素（div.richtexteditor）に dir="rtl" を設定し、ページに 1 つのスタイルシート <style id="rte-rtl-ui-styles"> を追加します。すべてのルールは .richtexteditor[dir="rtl"] で始まるため、反転していないエディターには影響しません。

ツールバー、ドロップダウン、サブメニュー、フローティングパネルは右から左の方向に従います。ドロップダウンとダイアログはエディターの要素内にあるため、一緒に反転します。段落メニューと Insert Link ダイアログで確認しています。
メニューの行、ステータスバー、タグ一覧、単語カウンターは右から並び、サイズ変更の隅は反対側に移ります。
反転するアイコンは、インデント、インデント解除、サブメニューの矢印など、読む方向を示すものだけです。太字、斜体、配置のアイコンはそのままです。

注意点

コンテンツは変更しません。テキストの方向はコンテンツに属し、テキスト方向プラグイン（textdirection.js）で設定します。たとえば、editor.setTextDirection("rtl") は <p dir="rtl">abc</p> と保存します。UI を反転しても、保存する HTML には何も追加しません。
「auto」では setHTMLCode() のたびに確認し直します。2.6.12 は各 setHTMLCode() の後に設定を再適用するため、toggleRtlUserInterface() やスラッシュメニューで切り替えても、新しい内容を読み込むと元に戻ります。独自の切り替えを設ける場合は、エディター作成時に rtlUserInterface を true または false に設定してください。
ツールバー文字列に rtlui を入れると、汎用アイコンと「rtlui」という名前のボタンになります。2.6.12 には専用のラベルとアイコンがないためです。
<style> 要素をブロックする厳格な Content-Security-Policy の下では、CSSOM を通してルールを再追加します。