Es war nicht immer einfach für Entwickler, erweiterte Bearbeitungsfunktionen in ihre Webanwendungen einzubinden. Die Webanwendung bietet die Möglichkeit, sowohl Nur-Text- als auch HTML-Dokumente mithilfe von Elementen wie <input> und <textarea> zu bearbeiten oder das contenteditable-Attribut auf Elemente anzuwenden. Die grundlegenden Funktionen dieser Elementtypen reichen jedoch oft nicht aus, um das zu erreichen, was Entwickler in ihren Apps erreichen möchten.
Entwickler haben oft ihre eigene benutzerdefinierte Editoransicht implementiert, die die Funktionen enthält, die ihre Nutzer benötigen. Die Editoransicht kann mit einem komplexen DOM oder sogar mit einem <canvas>-Element erstellt werden. Da der Entwickler aber nur dann Text eingeben kann, wenn ein bearbeitbares Element fokussiert ist, muss er irgendwo auf der Seite ein ausgeblendetes contenteditable-Element platzieren.
Das Ergebnis ist, dass der Nutzer zwar den Inhalt in der benutzerdefinierten Editoransicht der App direkt bearbeitet, der Entwickler aber tatsächlich die Eingabe mit Ereignishandlern im ausgeblendeten Element empfängt und dann in der sichtbaren Editoransicht widerspiegelt. Das kann zu Problemen führen, da der Entwickler mit dem standardmäßigen Bearbeitungsverhalten des Browsers im verborgenen contenteditable-Element zu kämpfen hat.
Um diese Art von Problemen zu beheben, hat das Microsoft Edge-Team die Standardisierung von EditContext vorangetrieben, einer neuen Webplattform-API, mit der Entwickler Texteingaben direkt empfangen können, ohne an das Standardbearbeitungsverhalten des Browsers gebunden zu sein.
Ein Beispiel aus der Praxis
Beispielsweise, wenn Nutzer in Word Online zusammenarbeiten. Nutzer können gemeinsam bearbeiten und die Änderungen und Cursorpositionen der anderen sehen. Wenn ein Mitbearbeiter jedoch beispielsweise ein IME-Fenster (Input Method Editor) verwendet, um japanischen Text zu verfassen, werden die Änderungen anderer Nutzer erst angezeigt, wenn der IME-Nutzer seine Eingabe abgeschlossen hat. Das liegt daran, dass Änderungen am bearbeiteten DOM-Bereich während einer aktiven IME-Eingabe dazu führen können, dass die Eingabe vorzeitig abgebrochen wird. Die Anwendung muss warten, bis das IME-Fenster geschlossen ist, um die Ansicht zu aktualisieren. Dies kann zu Verzögerungen führen und die Zusammenarbeit beeinträchtigen.
Um sowohl die Entwickler- als auch die Nutzerfreundlichkeit zu verbessern, benötigen Entwickler eine Möglichkeit, die Texteingabe von der HTML-DOM-Ansicht zu entkoppeln. Die Lösung für dieses Problem ist die EditContext API.
Grundlagen von EditContext
Mit EditContext kannst du Text- und Eingaben für die Bildkomposition direkt über die EditContext API-Oberfläche erhalten, anstatt Änderungen am DOM zu beobachten. So lässt sich die Verarbeitung der Eingabe genauer steuern und das Element <canvas> kann sogar bearbeitbar gemacht werden.
Wenn Sie einer Instanz von „EditContext“ ein Element zuordnen, wird es bearbeitbar:
// This will be our editable element.
const element = document.querySelector('#editor-element');
// Creating the EditContext object.
const editContext = new EditContext();
// Associating the EditContext object with our DOM element.
// The element is now focusable and can receive text input.
element.editContext = editContext;
// In order to render the text typed by the user onto the
// page, as well as the user's selection, you'll need to
// receive the input in a textupdate event callback.
editContext.addEventListener('textupdate', event => {
element.textContent = editContext.text;
// For brevity, the code to render the selection
// isn't shown here.
renderSelection(event.selectionStart, event.selectionEnd);
});
Pflichten des Autors
Mit der EditContext API lassen sich erweiterte Eingabemethoden wie IME-Eingabefenster, Emoji-Auswahlen und andere Eingabeoberflächen des Betriebssystems einfacher unterstützen. Damit all dies in Ihrem bearbeitbaren Element möglich ist, benötigt die EditContext API einige Informationen. Neben dem Rendern des Texts und der Auswahl müssen Sie bei der Verwendung der EditContext API noch einige andere Dinge beachten.
Seiten eines bearbeitbaren Bereichs verwalten oder wenn sich die Auswahl des Nutzers ändert
Rufen Sie die Methoden updateControlBounds() und updateSelectionBounds() auf, um die EditContext-Instanz zu informieren, wenn sich die Größe des bearbeitbaren Bereichs oder die Auswahl des Nutzers ändert. So kann die Plattform entscheiden, wo IME-Fenster und andere plattformspezifische Bearbeitungsoberflächen angezeigt werden.
// It's necessary to provide bounds information because EditContext
// is generic enough to work with any type of web editor, even
// <canvas>-based editors. The API doesn't make any assumptions as
// to how the editor is implemented or how the selection is rendered.
// Bounds are given in the client coordinate space.
const controlBound = editorElement.getBoundingClientRect();
const selection = document.getSelection();
const selectionBound = selection.getRangeAt(0).getBoundingClientRect();
editContext.updateControlBounds(controlBound);
editContext.updateSelectionBounds(selectionBound);
Position der Editor-Benutzeroberfläche verwalten
Warten Sie auf das Ereignis characterboundsupdate und rufen Sie updateCharacterBounds() auf, um der Plattform zu helfen, zu entscheiden, wo IME-Fenster und andere plattformspezifische Bearbeitungsoberflächen angezeigt werden sollen.
Formatierung anwenden
Warten Sie auf das textformatupdate-Ereignis und wenden Sie die vom Ereignis angegebene Formatierung auf die Editoransicht an. Diese Textdekorationen werden von IMEs beim Schreiben bestimmter Sprachen verwendet. Eine japanische IME zeigt beispielsweise durch einen Unterstrich an, welcher Teil des Textes gerade eingegeben wird.
Verhalten bei der Bearbeitung von Rich Text
Überwachen Sie das beforeinput-Ereignis, um alle gewünschten Bearbeitungsfunktionen für Rich Text zu verarbeiten, z. B. Hotkeys zum Fett- oder Kursivschreiben von Text oder zum Anwenden einer Rechtschreibkorrektur.
Änderungen an Nutzerauswahlen verwalten
Wenn sich die Auswahl des Nutzers durch Tastatur- oder Mauseingabe ändert, müssen Sie die Instanz „EditContext“ über die Änderung informieren. Das ist notwendig, da die EditContext API für eine Vielzahl von Anwendungsfällen geeignet ist, einschließlich Editoren, die mit dem <canvas>-Element gerendert werden und bei denen der Browser Auswahländerungen nicht automatisch erkennen kann.
document.addEventListener('selectionchange', () => {
const selection = document.getSelection();
// EditContext doesn't handle caret navigation, so all the caret navigation/selection that happens
// in DOM space needs to be mapped to plain text space by the author and passed to EditContext.
// This example code assumes the editable area only contains text under a single node.
editContext.updateSelection(selection.anchorOffset, selection.focusOffset);
});
Wenn das Element, das Sie mit EditContext verwenden, ein <canvas>-Element ist, müssen Sie auch die Auswahl- und Cursornavigation implementieren, z. B. die Navigation durch Text mit den Pfeiltasten. Außerdem funktioniert die integrierte Rechtschreibprüfung des Browsers nur in Elementen, die keine <canvas>-Elemente sind.
EditContext im Vergleich zu contenteditable
EditContext ist eine gute Wahl, wenn Sie einen voll funktionsfähigen Editor implementieren und die Texteingabe vollständig steuern möchten, oder wenn Sie erweiterte Funktionen wie die gemeinsame Bearbeitung mit mehreren Nutzern hinzufügen. Wenn Sie jedoch nur eine einfache Unterstützung für die Textbearbeitung benötigen, sollten Sie angesichts all der oben genannten Anforderungen an die Verwendung von EditContext weiterhin die Elemente <input>, <textarea> oder das Attribut contenteditable verwenden.
Aussichten
Das Microsoft Edge-Team hat EditContext in Chromium in Zusammenarbeit mit Chrome-Entwicklern implementiert und wird in Release 121 (Januar 2024) sowohl in Chrome als auch in Edge eingeführt. Derzeit ist sie nur in Chromium-basierten Browsern verfügbar. Sie können sich aber die Position von Mozilla und die Position von WebKit zur EditContext API ansehen.
Wir möchten es Webentwicklern einfacher machen, leistungsstarke benutzerdefinierte Bearbeitungsfunktionen im Web zu erstellen. Wir sind davon überzeugt, dass die EditContext API dies ermöglicht, da sie bestehende Herausforderungen angeht und eine direktere Möglichkeit zur Verarbeitung von Texteingaben bietet.
Weitere Informationen zur API finden Sie in der MDN-Dokumentation. Wenn Sie Feedback zum Design der API geben möchten, erstellen Sie ein Problem im GitHub-Repository der EditContext API. Wenn Sie Fehler bei der Implementierung der API melden möchten, reichen Sie einen Fehlerbericht unter crbug.com ein.