TextFormat

Die TextFormat-Schnittstelle repräsentiert spezifische Formatierungen, die auf einen Textbereich in einer editierbaren Textregion angewendet werden sollen, die an eine EditContext-Instanz angeschlossen ist. Die Textformatierung wird vom Input Method Editor (IME)-Fenster angefordert, mit dem der Benutzer Text verfasst.

Wenn Sie eine der standardmäßigen editierbaren Regionen des Webs verwenden, wie z.B. ein <textarea>-Element, wird die IME-Komposition von Browser und Betriebssystem für Sie gehandhabt. Zum Beispiel können bei Verwendung eines japanischen IME in einem Textbereich unter Windows die folgenden Textformate angewendet werden:

• Wenn Text mit der Tastatur eingegeben wird, haben die getippten Zeichen eine dünne gewellte Unterstreichung:

  

• Wenn der Benutzer einen Vorschlag aus der Liste der Kandidaten im IME-Fenster auswählt, wird der Text ersetzt und mit einer dicken durchgezogenen Linie unterstrichen:

  

Wenn Sie Ihre eigene benutzerdefinierte editierbare Region mithilfe der EditContext API erstellen, müssen Sie die IME-Komposition selbst verwalten. Sie sollten auf das textformatupdate-Ereignis lauschen, das Ihnen die Liste der Textformate gibt, die das IME-Fenster auf den verfassten Text anwenden möchte. Sie sollten dann die Formatierung des Textes, der in Ihrer editierbaren Region dargestellt wird, entsprechend aktualisieren.

<div id="editor" style="height:200px;background:#eee;"></div>

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

editContext.addEventListener("textformatupdate", (e) => {
  // Get the TextFormat instances.
  const formats = e.getTextFormats();

  // Iterate over the TextFormat instances.
  for (const format of formats) {
    console.log(
      `Applying a ${format.underlineThickness} ${format.underlineStyle} underline between ${format.rangeStart} and ${format.rangeEnd}.`,
    );
  }
});