TextFormat

Das TextFormat-Interface repräsentiert spezielle Formatierungen, die auf einen Textbereich in einem bearbeitbaren Textbereich angewendet werden sollen, der mit einer EditContext-Instanz verbunden ist. Die Textformatierung wird vom Fenster des Input Method Editors (IME) angefordert, mit dem der Benutzer Text erstellt.

Wenn Sie eine der standardmäßigen bearbeitbaren Bereiche des Webs verwenden, wie beispielsweise ein <textarea>-Element, wird die IME-Zusammensetzung von Browser und Betriebssystem für Sie übernommen. Zum Beispiel, wenn Sie japanisches IME in einem Textbereich auf Windows verwenden, können die folgenden Textformate angewendet werden:

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

  

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

  

Wenn Sie Ihren eigenen benutzerdefinierten bearbeitbaren Bereich erstellen, indem Sie die EditContext API verwenden, müssen Sie die IME-Zusammensetzung selbst verwalten. Sie sollten auf das textformatupdate-Ereignis hören, das Ihnen die Liste der Textformate gibt, die das IME-Fenster auf den zu erstellenden Text anwenden möchte. Sie sollten dann die Formatierung des im bearbeitbaren Bereich angezeigten Textes entsprechend aktualisieren.

<div id="editor"></div>

#editor {
  height: 200px;
  background: #eee;
}

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}.`,
    );
  }
});