EditContext API

Beim Eingeben von Text in einen bearbeitbaren Bereich einer Anwendung sind mehrere Akteure beteiligt:

Benutzer

Der Benutzer gibt den Text mittels einer Eingabemethode ein: Tastatur, Maus, Stimme oder andere Eingabemethoden.

Eingabemethodensoftware

Die Eingabemethodensoftware wandelt die Eingaben des Benutzers in Text um. Dies könnte zum Beispiel ein Input Method Editor (IME) sein, der Tastenanschläge einer Standardtastatur in japanische, chinesische oder koreanische Zeichen umwandelt.

Text-Eingabedienst des Betriebssystems

Der Text-Eingabedienst des Betriebssystems fungiert als Verbindung zwischen der Eingabemethodensoftware und der Anwendung.

Textbearbeitungskontext der Anwendung

Der Textbearbeitungskontext der Anwendung stellt einen Zustand des bearbeiteten Textes bereit. Dieser Zustand enthält Informationen wie den Text selbst, die aktuelle Auswahl und den Ort des Textes in der Benutzeroberfläche der App.

Bearbeitbarer Bereich der Anwendung

Der bearbeitbare Bereich der Anwendung ist das UI-Element der Anwendung, das den Text anzeigt.

Während die ersten drei Akteure vom Betriebssystem bereitgestellt werden, ist die Anwendung dafür verantwortlich, den bearbeitbaren Bereich und den Textbearbeitungskontext bereitzustellen.

Im Web sind bearbeitbare Bereiche oft <textarea> Elemente, <input> Elemente oder Elemente mit dem contenteditable Attribut auf true gesetzt. Für diese Elemente stellt der Browser automatisch den Textbearbeitungskontext bereit, und Web-Autoren müssen keinen Code schreiben, um die Texteingabe zu unterstützen.

Web-Autoren können auch benutzerdefinierte bearbeitbare Bereiche mit der EditContext API erstellen. Beispielsweise könnte ein Web-Autor einen Rich-Text-Editor erstellen, indem er ein <canvas> Element zum Rendern des Textes verwendet. In diesem Fall muss der Web-Autor Code schreiben, um die Texteingabe zu unterstützen.

Wenn Sie Ihren eigenen bearbeitbaren Bereich implementieren, unabhängig davon, ob er Text in ein <canvas> zeichnet oder in eine Reihe von DOM-Elementen rendert, sind Sie dafür verantwortlich, die Dinge bereitzustellen, die der Browser normalerweise für Sie bereitstellt, wenn Sie stattdessen ein <textarea> verwenden würden. Dazu gehört:

• Das Rendern des Textes.
• Das Rendern der Auswahl (wenn Sie Ihren bearbeitbaren Bereich mit DOM-Elementen anstelle eines <canvas> erstellen, rendert der Browser die Auswahl für Sie).
• Dem Text-Eingabedienst des Betriebssystems mitzuteilen, wann sich die Auswahl ändert.
• Dem Text-Eingabedienst des Betriebssystems mitzuteilen, wo sich der Text in der Benutzeroberfläche befindet, damit die Eingabemethodensoftware das IME-Kompositionsfenster an der richtigen Stelle anzeigen kann.
• Bestimmte Textformate anzuwenden, wenn der Benutzer Text innerhalb des IME-Kompositionsfensters eingibt.

Im Gegenzug macht die EditContext API das DOM-Element, das Sie wählen, editierbar und Teil der Fokus-Reihenfolge des Dokuments. Zusätzlich stellt die EditContext API auch Informationen über den Zustand des bearbeiteten Textes bereit, die es Ihnen ermöglichen, diesen auf eine benutzerdefinierte Weise zu rendern. Die Ihnen zur Verfügung gestellten Informationen umfassen:

• Den aktuellen Textinhalt.
• Die aktuelle Auswahl.
• Ob eine IME-Komposition im Gang ist und ob Textformate angewendet werden müssen.

Wenn Sie die EditContext API mit einem <canvas>-Element verwenden, stellen Sie sicher, dass der Text auch assistierenden Technologien zugänglich gemacht wird. Bildschirmleser können den Text in einem <canvas>-Element nicht lesen. Zum Beispiel könnten Sie eine separate Ansicht des Textes in einem unsichtbaren DOM-Element pflegen, das den Bildschirmlesern präsentiert wird.

Um die EditContext API zu verwenden, müssen Sie eine Instanz der EditContext Schnittstelle erstellen und sie dann an das DOM-Element anhängen, das Sie mit der editContext Eigenschaft editierbar machen möchten. Das DOM-Element kann jedes Element sein, einschließlich eines <div> oder eines <canvas>-Elements.

<canvas id="editor-canvas"></canvas>

const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;

Eine EditContext Instanz kann nur an ein DOM-Element gleichzeitig angehängt werden.

Das Anhängen einer EditContext Instanz an ein DOM-Element macht das Element fokussierbar, als Teil der Fokus-Reihenfolge des Dokuments. Der Benutzer kann Text in das Element eingeben, indem er die Eingabemethode seiner Wahl verwendet, und Sie können Ereignisse verwenden, die von der EditContext Instanz ausgelöst werden, um den Text und die Auswahl zu rendern.

Bei der Verwendung der EditContext API ist es hilfreich, Ihr Bearbeitungserlebnis als Modell- und View-Architektur zu gestalten.

Die EditContext Instanz repräsentiert das Modell Ihres bearbeitbaren Bereichs. Ihr interner Zustand wird aktualisiert, wenn eine Texteingabe empfangen wird und wenn sich die Auswahl ändert.

Anschließend können Sie den Text und die Auswahl in der Ansicht rendern, wobei Sie die von der EditContext Instanz bereitgestellten Informationen verwenden, auch wenn Ihre Ansicht nicht genau mit dem Modell übereinstimmen muss. Sie können den Text auf jede gewünschte Weise rendern.

EditContext Experimentell

Die EditContext Schnittstelle ist eine JavaScript-Reflexion des Textbearbeitungskontexts, der normalerweise vom Browser transparent bereitgestellt wird, wenn standardmäßige bearbeitbare Bereiche wie textarea verwendet werden. EditContext bietet den Zustand des bearbeiteten Textes mit Informationen wie dem Text selbst, der aktuellen Auswahl oder der Position des Textes in der Benutzeroberfläche der App.

TextFormat

Die TextFormat Schnittstelle wird verwendet, um bestimmte Formate darzustellen, die auf Textbereiche angewendet werden sollten, wenn der Benutzer Text innerhalb des IME-Kompositionsfensters eingibt.

• Verwendung der EditContext API