TextFormatUpdateEvent: getTextFormats() 方法

有限可用性

此功能不是基线，因为它在某些最广泛使用的浏览器中无法正常工作。

实验性： 这是一个实验性技术
在生产环境中使用它之前，请仔细查看浏览器兼容性表。

getTextFormats() 方法是 TextFormatUpdateEvent 接口的方法，它返回一个包含 Array 的 TextFormat 对象，这些对象表示输入法编辑器 (IME) 窗口想要应用于正在组成的文本的格式。

语法

getTextFormats()

返回值

包含 TextFormat 对象的 Array。

示例

样式化 IME 组成文本

在以下示例中，textformatupdate 事件用于更新可编辑区域中文本的格式。

html

<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();
  }
});

规范

规范
EditContext API # dom-textformatupdateevent-gettextformats

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。