TextFormatUpdateEvent: getTextFormats()-Methode
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die getTextFormats()
-Methode des TextFormatUpdateEvent
-Interfaces gibt ein Array
von TextFormat
-Objekten zurück, die die Formate darstellen, die ein Input Method Editor (IME)-Fenster auf den zu komponierenden Text anwenden möchte.
Syntax
getTextFormats()
Rückgabewert
Ein Array
, das TextFormat
-Objekte enthält.
Beispiele
Formatierung von durch IME komponiertem Text
Im folgenden Beispiel wird das textformatupdate
-Ereignis verwendet, um die Formatierung des Textes im bearbeitbaren Bereich zu aktualisieren.
<canvas id="editor-canvas"></canvas>
const TEXT_X = 10;
const TEXT_Y = 10;
const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
const editContext = new EditContext();
canvas.editContext = editContext;
editContext.addEventListener("textformatupdate", (e) => {
// Clear the canvas.
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Render the text.
ctx.fillText(editContext.text, TEXT_X, TEXT_Y);
console.log(`Rendering text: ${editContext.text}`);
// Get the text formats that the IME window wants to apply.
const formats = e.getTextFormats();
// Iterate over the text formats
for (const format of formats) {
const { rangeStart, rangeEnd, underlineStyle, underlineThickness } = format;
console.log(
`Applying underline ${underlineThickness} ${underlineStyle} between ${rangeStart} and ${rangeEnd}.`,
);
const underlineXStart = ctx.measureText(
editContext.text.substring(0, rangeStart),
).width;
const underlineXEnd = ctx.measureText(
editContext.text.substring(0, rangeEnd),
).width;
const underlineY = TEXT_Y + 3;
// For brevity, this example only draws a simple underline.
// Use underlineStyle and underlineThickness to draw the correct underline.
ctx.beginPath();
ctx.moveTo(TEXT_X + underlineXStart, underlineY);
ctx.lineTo(TEXT_X + underlineXEnd, underlineY);
ctx.stroke();
}
});
Spezifikationen
Specification |
---|
EditContext API # dom-textformatupdateevent-gettextformats |
Browser-Kompatibilität
BCD tables only load in the browser