TextFormat

Интерфейс TextFormat представляет собой определенный формат, который должен быть применен к участку текста в области редактируемого текста, прикреплённой к экземпляру EditContext. Форматирование текста запрашивается окном редактора ввода (IME), с которым пользователь вводит текст.

При использовании одной из стандартных областей редактирования веб-страницы, такой как элемент <textarea>, обработка ввода IME осуществляется браузером и операционной системой. Например, при использовании японского IME в textarea в Windows можно применить следующие форматы текста:

• При вводе текста с клавиатуры набираемые символы имеют тонкую волнистую подчёркивание:

  

• При выборе предложения из списка кандидатов в окне IME текст заменяется и подчёркивается толстой сплошной линией:

  

При создании собственной пользовательской области редактирования с помощью API EditContext необходимо самостоятельно обрабатывать ввод IME. Следует прослушивать событие textformatupdate, которое предоставляет список форматов текста, которые окно IME хочет применить к вводимому тексту. Затем необходимо соответствующим образом обновить форматирование текста, отображаемого в вашей области редактирования.

TextFormat() Экспериментально

Возвращает новый экземпляр TextFormat.

TextFormat.rangeStart Только для чтения Экспериментально

Начальная позиция диапазона текста, который необходимо отформатировать указанным форматом текста.

TextFormat.rangeEnd Только для чтения Экспериментально

Конечная позиция диапазона текста, который необходимо отформатировать указанным форматом текста.

TextFormat.underlineStyle Только для чтения Экспериментально

Стиль подчёркивания, который необходимо применить к диапазону текста, который форматируется.

TextFormat.underlineThickness Только для чтения Экспериментально

Толщина подчёркивания, которую необходимо применить к диапазону текста, который форматируется.

В следующем примере используется событие textformatupdate для регистрации различных форматов, которые окно ввода IME хочет применить к диапазонам текста в элементе редактирования. Обратите внимание, что обратный вызов обработчика событий в этом примере вызывается только при использовании окна IME для ввода текста.

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