Interface de droite à gauche

Inverse l’interface de l’éditeur pour les utilisateurs de l’arabe, de l’hébreu, du persan et de l’ourdou : la barre d’outils commence à droite ; menus, boîtes de dialogue, barre d’état et coin de redimensionnement sont inversés. Cela modifie l’interface autour du contenu, sans modifier le contenu lui-même.

Activation

Cette fonctionnalité est fournie par le plugin rtlui.js (également inclus dans plugins/all_plugins.js). Par défaut, il inverse l’interface lorsque la zone d’édition est elle-même de droite à gauche. Pour toujours l’inverser, définissez rtlUserInterface: true. Chargez un module de langue pour les textes :

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

Aucun bouton dédié dans la barre d’outils. Les utilisateurs peuvent basculer depuis le menu de commandes slash (« Mirror editor for RTL »), et votre page peut le faire avec l’API ci-dessous.

Options

Option	Valeur par défaut	Fonctionnement
rtlUserInterface	"auto"	"auto" : inverse lorsque la valeur calculée de direction de la zone d’édition est rtl. true : toujours inverser. false : ne jamais inverser.

« auto » examine toute la zone d’édition, et non chaque paragraphe ; un paragraphe avec dir="rtl" ne compte pas. Deux choses rendent la zone d’édition de droite à gauche : le defaultTextDirection: "rtl" du plugin de direction du texte (qui définit dir="rtl" sur la zone), ou une feuille de style de contenu :

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

La vérification s’exécute au démarrage et après chaque setHTMLCode(). Changer ensuite la direction avec editor.setBaseDirection("rtl") n’inverse l’interface qu’au prochain setHTMLCode() ; appelez editor.setRtlUserInterface(true) en même temps.

API

Méthode	Fonctionnement
editor.setRtlUserInterface(true)	Inverse (false pour annuler). Renvoie le nouvel état.
editor.toggleRtlUserInterface()	Bascule et renvoie le nouvel état. editor.execCommand("rtlui") fait de même.
editor.isRtlUserInterface()	true lorsque l’interface est inversée.
editor.getRtlUiCss()	Le CSS ajouté par le plugin, sous forme de chaîne.

Éléments modifiés

Le plugin définit dir="rtl" sur l’élément externe de l’éditeur (div.richtexteditor) et ajoute à la page une feuille de style, <style id="rte-rtl-ui-styles">, dont toutes les règles commencent par .richtexteditor[dir="rtl"]. Les éditeurs non inversés ne sont pas affectés.

• La barre d’outils, les menus déroulants, sous-menus et panneaux flottants suivent le sens de droite à gauche. Les menus et boîtes de dialogue se trouvent dans l’élément de l’éditeur : ils sont donc aussi inversés (vérifié avec le menu de paragraphes et Insert Link).
• Les lignes de menus, la barre d’état, la liste des balises et le compteur de mots se lisent depuis la droite ; le coin de redimensionnement passe de l’autre côté.
• Seules les icônes indiquant un ordre de lecture sont inversées : augmenter ou réduire le retrait et flèche de sous-menu. Gras, italique et alignement restent inchangés.

À savoir

• Le contenu n’est pas modifié. La direction du texte appartient au contenu et se règle avec le plugin de direction du texte (textdirection.js) ; par exemple, editor.setTextDirection("rtl") enregistre <p dir="rtl">abc</p>. Inverser l’interface n’ajoute rien au HTML enregistré.
• Avec « auto », setHTMLCode() relance la vérification. Dans la version 2.6.12, le plugin réapplique son réglage après chaque setHTMLCode() : un changement effectué par toggleRtlUserInterface() ou le menu de commandes slash est donc annulé quand un nouveau contenu est chargé en mode « auto ». Si votre page a son propre commutateur, définissez rtlUserInterface à true ou false à la création de l’éditeur.
• Placer rtlui dans une chaîne de barre d’outils crée un bouton avec une icône générique et le nom « rtlui », car la version 2.6.12 ne lui attribue ni libellé ni icône.
• Avec une politique Content-Security-Policy stricte qui bloque les éléments <style>, le plugin réajoute ses règles via le CSSOM.

Voir aussi : langue d’un passage, démonstration d’accessibilité et de langues, démonstration de langue de l’interface.