EditContext: метод updateText()

Метод updateText() интерфейса EditContext обновляет внутреннее текстовое содержимое объекта EditContext.

Использовать этот метод не требуется, если пользователь вводит текст в связанный элемент. Объект EditContext автоматически обновит своё внутреннее текстовое содержимое и при необходимости сгенерирует события textupdate.

Однако этот метод может быть использован, если пользователь взаимодействует с текстовым содержимым иными способами, например, при вставке текста из буфера обмена.

rangeStart

Число, представляющее начало диапазона заменяемого текста.

rangeEnd

Число, представляющее конец диапазона заменяемого текста.

text

Строка, представляющая новое текстовое содержимое.

• Если предоставлено меньше трех аргументов, выбрасывается исключение TypeError DOMException.

В этом примере показано, как использовать метод updateText для обновления текстового содержимого EditContext элемента <canvas> при нажатии пользователем комбинации клавиш Ctrl/Cmd + V для вставки текста.

В примере также используется метод Clipboard.readText() для чтения текста из буфера обмена.

<canvas id="editor-canvas"></canvas>

const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");

const editContext = new EditContext();
canvas.editContext = editContext;

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(editContext.text, 0, 40);
}

editContext.addEventListener("textupdate", (e) => {
  render();
});

canvas.addEventListener("keydown", async (e) => {
  if (e.key == "v" && (e.ctrlKey || e.metaKey)) {
    const pastedText = await navigator.clipboard.readText();
    console.log(
      `The user pasted the text: ${pastedText}. Updating the EditContext text.`,
    );

    editContext.updateText(
      editContext.selectionStart,
      editContext.selectionEnd,
      pastedText,
    );

    editContext.updateSelection(
      editContext.selectionStart + pastedText.length,
      editContext.selectionStart + pastedText.length,
    );

    render();
  }
});

• Интерфейс EditContext, к которому он принадлежит.