Schnittstelle von rechts nach links

Spiegelt die Benutzeroberfläche des Editors für Arabisch-, Hebräisch-, Persisch- und Urdu-Benutzer wider: Die Symbolleiste wird von rechts ausgeführt und Menüs, Dialoge, die Statusleiste und die Größenänderungsecke werden entsprechend gespiegelt. Es ändert den Editor rund um den Inhalt, nicht den Inhalt selbst.

Schalten Sie es ein

Die Funktion ist diertlui.jsPlugin (auch inplugins/all_plugins.js). Standardmäßig wird die Benutzeroberfläche gespiegelt, wenn der Bearbeitungsbereich selbst von rechts nach links verläuft. Um es immer zu spiegeln, stellen Sie einrtlUserInterface: true. Laden Sie ein Sprachpaket für die Wörter:

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

Es gibt keine Symbolleistenschaltfläche dafür. Benutzer können es über das Schrägstrich-Menü ("Mirror editor for RTL"), und Ihre Seite kann es mit der untenstehenden API umschalten.

Optionen

Option	Standard	Was es bewirkt
rtlUserInterface	"auto"	"auto": Spiegeln, wenn der Bearbeitungsbereich berechnet istdirectionIstrtl. true: immer spiegeln.false: niemals spiegeln.

"auto"betrachtet den gesamten Bearbeitungsbereich, nicht einzelne Absätze; ein Absatz mitdir="rtl"zählt nicht. Zwei Dinge machen den Bearbeitungsbereich von rechts nach links: die Textrichtungs-PluginsdefaultTextDirection: "rtl"(es setztdir="rtl"im Bearbeitungsbereich) oder ein Content-Stylesheet:

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

Die Prüfung wird beim Start des Editors und nach jedem ausgeführtsetHTMLCode(). Ändern Sie die Dokumentrichtung später miteditor.setBaseDirection("rtl")spiegelt die Schnittstelle erst beim nächsten MalsetHTMLCode(); Anrufeditor.setRtlUserInterface(true)gleichzeitig.

API

Verfahren	Was es bewirkt
editor.setRtlUserInterface(true)	Spiegel (falserückgängig machen). Gibt den neuen Zustand zurück.
editor.toggleRtlUserInterface()	Switch, gibt den neuen Zustand zurück.editor.execCommand("rtlui")macht das Gleiche.
editor.isRtlUserInterface()	truewenn die Schnittstelle gespiegelt ist.
editor.getRtlUiCss()	Das CSS, das das Plugin als String hinzufügt.

Was ändert sich

Das Plugin setztdir="rtl"auf dem äußeren Element des Editors (div.richtexteditor) und fügt der Seite ein Stylesheet hinzu,<style id="rte-rtl-ui-styles">, dessen Regeln alle mit beginnen.richtexteditor[dir="rtl"]. Nicht gespiegelte Editoren sind davon nicht betroffen.

• Die Symbolleiste, Dropdown-Menüs, Untermenüs und schwebenden Bedienfelder folgen der Richtung von rechts nach links. Dropdown-Listen und Dialoge befinden sich innerhalb des Editor-Elements und werden daher ebenfalls gespiegelt (überprüft mit dem Absatzmenü und dem Dialog „Link einfügen“).
• Von rechts gelesene Menüzeilen, die Statusleiste, die Tag-Liste und der Wortzähler; Die Größenänderungsecke wird auf die andere Seite verschoben.
• Nur Symbole, die die Lesereihenfolge anzeigen, werden umgedreht: Einzug, Auszug und der Untermenüpfeil. Fett, Kursiv und die Ausrichtungssymbole bleiben unverändert.

Wissenswertes

• Der Inhalt wird nicht verändert.Die Richtung des Textes gehört zum Inhalt und wird durch das Textrichtungs-Plugin festgelegt (textdirection.js); Zum Beispieleditor.setTextDirection("rtl")spart<p dir="rtl">abc</p>. Durch das Spiegeln der Schnittstelle wird dem gespeicherten HTML nichts hinzugefügt.
• Mit"auto" , setHTMLCode()prüft noch einmal.In 2.6.12 wendet das Plugin seine Einstellung nach jedem erneut ansetHTMLCode(), also ein Wechsel mit gemachttoggleRtlUserInterface()oder das Slash-Menü wird rückgängig gemacht, wenn neuer Inhalt in ein geladen wird"auto"Editor. Wenn Ihre Seite über einen eigenen Schalter verfügt, legen Sie ihn festrtlUserInterfaceZutrueoderfalsewenn Sie den Editor erstellen.
• Wenn Sie rtlui in eine Symbolleistenzeichenfolge einfügen, wird eine Schaltfläche mit einem generischen Symbol und dem Namen "rtlui" erstellt, da 2.6.12 keine Beschriftung oder kein Symbol dafür hat.
• Unter einer strengen Inhaltssicherheitsrichtlinie, die <style>-Elemente blockiert, fügt das Plugin seine Regeln über das CSSOM erneut hinzu.

Verwandt: Textteilsprache, Barrierefreiheit und Sprachen-Demo, UI-Sprachdemo.