Interfaz de derecha a izquierda

Invierte la interfaz del propio editor para usuarios de árabe, hebreo, persa y urdu: la barra de herramientas empieza por la derecha, y los menús, cuadros de diálogo, barra de estado y esquina de redimensionamiento se invierten para adaptarse. Cambia el editor que rodea al contenido, no el contenido en sí.

Cómo activarlo

Esta función la ofrece el plugin rtlui.js (también incluido en plugins/all_plugins.js). De forma predeterminada invierte la interfaz cuando el área de edición está de derecha a izquierda. Para invertirla siempre, establece rtlUserInterface: true. Carga un paquete de idioma para los 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>

No tiene botón en la barra de herramientas. Los usuarios pueden cambiarlo desde el menú de comandos con barra ("Mirror editor for RTL"), y tu página puede hacerlo mediante la API siguiente.

Opciones

Opción	Valor predeterminado	Función
rtlUserInterface	"auto"	"auto": invierte cuando el valor calculado de direction del área de edición es rtl. true: invierte siempre. false: no invierte nunca.

"auto" examina toda el área de edición, no los párrafos individuales; un párrafo con dir="rtl" no cuenta. Hay dos formas de orientar el área de edición de derecha a izquierda: el defaultTextDirection: "rtl" del plugin de dirección de texto (establece dir="rtl" en el área de edición), o una hoja de estilos del contenido:

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

La comprobación se ejecuta al iniciar el editor y después de cada setHTMLCode(). Si se cambia después la dirección del documento con editor.setBaseDirection("rtl") , la interfaz solo se invierte en el siguiente setHTMLCode(); llama a editor.setRtlUserInterface(true) al mismo tiempo.

API

Método	Función
editor.setRtlUserInterface(true)	Invierte (false para deshacer). Devuelve el nuevo estado.
editor.toggleRtlUserInterface()	Alterna y devuelve el nuevo estado. editor.execCommand("rtlui") hace lo mismo.
editor.isRtlUserInterface()	true cuando la interfaz está invertida.
editor.getRtlUiCss()	El CSS que añade el plugin, como cadena.

Qué cambia

El plugin establece dir="rtl" en el elemento exterior del editor (div.richtexteditor) y añade a la página una hoja de estilos, <style id="rte-rtl-ui-styles">, cuyas reglas empiezan todas por .richtexteditor[dir="rtl"]. Los editores que no están invertidos no se ven afectados.

• La barra de herramientas, los menús desplegables, los submenús y los paneles flotantes siguen la dirección de derecha a izquierda. Los desplegables y cuadros de diálogo están dentro del elemento del editor, así que también se invierten (comprobado con el menú de párrafos y el cuadro Insert Link).
• Las filas de los menús, la barra de estado, la lista de etiquetas y el contador de palabras se leen desde la derecha; la esquina de redimensionamiento pasa al otro lado.
• Solo se invierten los iconos que muestran el orden de lectura: aumentar sangría, reducir sangría y la flecha de submenú. Los de negrita, cursiva y alineación permanecen igual.

Aspectos a tener en cuenta

• El contenido no cambia. La dirección del texto pertenece al contenido y se establece mediante el plugin de dirección de texto (textdirection.js); por ejemplo, editor.setTextDirection("rtl") guarda <p dir="rtl">abc</p>. Invertir la interfaz no añade nada al HTML guardado.
• Con "auto", setHTMLCode() vuelve a comprobarlo. En 2.6.12, el plugin vuelve a aplicar su ajuste después de cada setHTMLCode(), por lo que un cambio realizado con toggleRtlUserInterface() o con el menú de comandos con barra se revierte al cargar contenido nuevo en un editor "auto". Si tu página tiene su propio interruptor, establece rtlUserInterface en true o false al crear el editor.
• Incluir rtlui en una cadena de barra de herramientas crea un botón con un icono genérico y el nombre "rtlui", porque 2.6.12 no tiene etiqueta ni icono para él.
• Con una Content-Security-Policy estricta que bloquee los elementos <style> , el plugin vuelve a añadir sus reglas mediante CSSOM.

Relacionado: Idioma de fragmentos de texto, demo de accesibilidad e idiomas, demo de idioma de la interfaz.