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 Anschein macht, die Inhalte direkt in der benutzerdefinierten Editoransicht der App zu bearbeiten, der Entwickler aber tatsächlich die Eingabe mit Ereignishandlern im ausgeblendeten Element empfängt und dann in der sichtbaren Editoransicht spiegelt. 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 mit anderen 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 Bereich des zu bearbeitenden DOMs dazu führen können, dass die Zusammensetzung vorzeitig abgebrochen wird. Die Anwendung muss warten, bis das IME-Fenster geschlossen wird, bevor die Ansicht aktualisiert werden kann. Dies kann zu Verzögerungen führen und die Zusammenarbeit behindern.
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 EditContext API ist die Lösung für dieses Problem.
Grundlagen von EditContext
Mit EditContext können Sie Text- und Kompositionseingaben direkt über die EditContext API-Oberfläche empfangen, 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 Textes und der Auswahl sind bei der Verwendung der EditContext API weitere Schritte auszuführen.
Seiten eines bearbeitbaren Bereichs verwalten oder Änderungen an der Auswahl des Nutzers
Rufen Sie die Methoden updateControlBounds() und updateSelectionBounds() auf, um die EditContext-Instanz jedes Mal zu informieren, wenn sich die Größe der bearbeitbaren Region 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 characterboundsupdate-Ereignis und rufen Sie updateCharacterBounds() auf, um der Plattform bei der Entscheidung zu helfen, wo IME-Fenster und andere plattformspezifische Bearbeitungs-UIs 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. Bei japanischen IMEs wird beispielsweise unterstrichen, welcher Teil des Texts aktiv ist.
Rich-Text-Bearbeitungsfunktionen
Ü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 der Nutzerauswahl verwalten
Wenn sich die Auswahl des Nutzers aufgrund von Tastatur- oder Mauseingaben ändert, müssen Sie die EditContext-Instanz über die Änderung informieren. Das ist aufgrund der Anwendbarkeit der EditContext API auf eine Vielzahl von Anwendungsfällen erforderlich, einschließlich Editoren, die mit dem <canvas>-Element gerendert werden, 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 es wird in Chrome 121 (Januar 2024) und Edge 121 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, senden Sie einen Fehlerbericht an crbug.com.