Interface da direita para a esquerda

Espelha a própria interface do editor para usuários de árabe, hebraico, persa e urdu: a barra de ferramentas começa pela direita, e os menus, as caixas de diálogo, a barra de status e o canto de redimensionamento são invertidos para acompanhar. Muda o editor em volta do conteúdo, não o conteúdo em si.

O editor com o pacote de idioma árabe e a interface espelhada: a barra de ferramentas começa na borda direita com Bold, o texto em árabe está alinhado à direita e o menu de parágrafo lista os nomes dos títulos em árabe alinhados à direita — O pacote de idioma árabe com `rtlUserInterface: true`, com o menu de parágrafo aberto.

Ative o recurso

O recurso é o plugin rtlui.js (também incluído em plugins/all_plugins.js). Por padrão, ele espelha a interface quando a própria área de edição é da direita para a esquerda. Para espelhá-la sempre, defina rtlUserInterface: true. Carregue um pacote de idioma para os textos:

<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>

Não há botão na barra de ferramentas para isso. Os usuários podem alterná-lo pelo menu de barra ("Mirror editor for RTL"), e a sua página pode alterná-lo com a API abaixo.

Opções

Opção	Padrão	O que faz
`rtlUserInterface`	`"auto"`	`"auto"`: espelha quando a `direction` computada da área de edição é `rtl`. `true`: espelha sempre. `false`: nunca espelha.

"auto" olha a área de edição inteira, não parágrafos isolados; um parágrafo com dir="rtl" não conta. Duas coisas tornam a área de edição da direita para a esquerda: o defaultTextDirection: "rtl" do plugin de direção do texto (ele define dir="rtl" na área de edição) ou uma folha de estilo de conteúdo:

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

A verificação roda quando o editor inicia e depois de cada setHTMLCode(). Mudar a direção do documento depois, com editor.setBaseDirection("rtl"), só espelha a interface no próximo setHTMLCode(); chame editor.setRtlUserInterface(true) ao mesmo tempo.

API

Método	O que faz
`editor.setRtlUserInterface(true)`	Espelha (`false` para desfazer). Retorna o novo estado.
`editor.toggleRtlUserInterface()`	Alterna e retorna o novo estado. `editor.execCommand("rtlui")` faz o mesmo.
`editor.isRtlUserInterface()`	`true` quando a interface está espelhada.
`editor.getRtlUiCss()`	O CSS que o plugin adiciona, como string.

O que muda

O plugin define dir="rtl" no elemento externo do editor (div.richtexteditor) e adiciona uma folha de estilo à página, <style id="rte-rtl-ui-styles">, cujas regras começam todas com .richtexteditor[dir="rtl"]. Os editores que não estão espelhados não são afetados por ela.

A barra de ferramentas, os menus suspensos, os submenus e os painéis flutuantes seguem a direção da direita para a esquerda. Os menus suspensos e as caixas de diálogo ficam dentro do elemento do editor; por isso, também são espelhados (verificado com o menu de parágrafo e a caixa de diálogo Insert Link).
As linhas dos menus, a barra de status, a lista de tags e o contador de palavras são lidos a partir da direita; o canto de redimensionamento passa para o outro lado.
Só os ícones que indicam a ordem de leitura são invertidos: aumentar recuo, diminuir recuo e a seta de submenu. Negrito, itálico e os ícones de alinhamento continuam como estão.

O que você precisa saber

O conteúdo não é alterado. A direção do texto pertence ao conteúdo e é definida pelo plugin de direção do texto (textdirection.js); por exemplo, editor.setTextDirection("rtl") salva <p dir="rtl">abc</p>. Espelhar a interface não adiciona nada ao HTML salvo.
Com "auto", setHTMLCode() verifica de novo. Na 2.6.12, o plugin reaplica a sua configuração depois de cada setHTMLCode(); assim, uma troca feita com toggleRtlUserInterface() ou pelo menu de barra é desfeita quando um novo conteúdo é carregado em um editor "auto". Se a sua página tem a própria chave, defina rtlUserInterface como true ou false ao criar o editor.
Colocar rtlui em uma string de barra de ferramentas cria um botão com um ícone genérico e o nome "rtlui", porque a 2.6.12 não tem rótulo nem ícone para ele.
Com uma Content-Security-Policy rígida que bloqueia elementos <style>, o plugin readiciona as regras pelo CSSOM.

Relacionados: Idioma de trechos de texto, demonstração de acessibilidade e idiomas, demonstração de idioma da interface.