TextFormat

Die TextFormat Schnittstelle repräsentiert spezifische Formatierungen, die auf einen Textbereich in einem bearbeitbaren Textbereich angewendet werden sollen, der an eine EditContext-Instanz angehängt ist. Die Textformatierung wird vom Eingabemethodeneditor (IME) angefordert, mit dem der Benutzer Text verfasst.

Wenn Sie eine der standardmäßigen bearbeitbaren Bereiche des Webs verwenden, wie etwa ein <textarea>-Element, wird die IME-Komposition vom Browser und Betriebssystem für Sie verwaltet. Beispielsweise können bei der Verwendung des japanischen IME in einem Textbereich unter Windows die folgenden Textformate angewendet werden:

• Wenn Text mit der Tastatur verfasst wird, haben die eingegebenen Zeichen eine dünne wellige 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:

  

Beim Erstellen eines eigenen benutzerdefinierten bearbeitbaren Bereichs mit der EditContext API müssen Sie die IME-Komposition selbst verwalten. Sie sollten das textformatupdate-Ereignis überwachen, das Ihnen die Liste der Textformate liefert, die das IME-Fenster auf den verfassten Text anwenden möchte. Sie sollten dann die Formatierung des im bearbeitbaren Bereich angezeigten Textes 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}.`,
    );
  }
});