API EditContext

API EditContext позволяет создавать на веб-страницах богатые текстовые редакторы, поддерживающие расширенный ввод текста, такие как ввод с помощью Input Method Editor (IME), выбор эмодзи или другие платформенно-специфичные интерфейсы редактирования.

С API EditContext вы получаете гибкость в отображении собственной области редактирования текста с помощью любой технологии.

При вводе текста в редактируемую область приложения участвуют несколько субъектов:

Пользователь

Пользователь вводит текст с помощью устройства ввода: клавиатуры, мыши, голоса или другого метода.

Программное обеспечение метода ввода

Программное обеспечение метода ввода преобразует ввод пользователя в текст. Например, это может быть Input Method Editor (IME), преобразующий нажатия клавиш с обычной клавиатуры в японские, китайские или корейские символы.

Сервис ввода текста ОС

Сервис ввода текста операционной системы служит связующим звеном между программным обеспечением метода ввода и приложением.

Контекст редактирования текста приложения

Контекст редактирования текста приложения предоставляет состояние редактируемого текста. Состояние содержит информацию, такую как сам текст, текущий выделенный фрагмент, расположение текста в пользовательском интерфейсе приложения.

Редактируемая область приложения

Редактируемая область приложения — это элемент пользовательского интерфейса приложения, отображающий текст.

В то время как три первых субъекта предоставляются операционной системой, приложение отвечает за предоставление области редактирования и контекста редактирования текста.

В веб-приложениях области редактирования часто являются элементами <textarea>, элементами <input> или элементами с атрибутом contenteditable, установленным в значение true. Для этих элементов браузер автоматически предоставляет контекст редактирования текста, и веб-разработчикам не требуется писать код для поддержки ввода текста.

Веб-разработчики также могут создавать пользовательские области редактирования с помощью API EditContext. Например, веб-разработчик может создать богатый текстовый редактор, используя элемент <canvas> для отображения текста. В этом случае веб-разработчик должен написать код для поддержки ввода текста.

Если вы решите реализовать собственную область редактирования, независимо от того, рисуете ли вы текст в <canvas> или отображаете его в виде серии элементов DOM, вы несете ответственность за обеспечение того, что браузер обычно предоставлял бы вам при использовании элемента <textarea>. Это включает:

• Отображение текста.
• Отображение выделения (если вы создаете свою область редактирования с помощью элементов DOM вместо <canvas>, то браузер отображает выделение за вас).
• Уведомление сервиса ввода текста ОС о изменении выделения.
• Уведомление сервиса ввода текста ОС о местоположении текста в пользовательском интерфейсе, чтобы программное обеспечение метода ввода могло отобразить окно IME в правильном месте.
• Применение определенных форматов текста, когда пользователь вводит текст в окне IME.

Взамен API EditContext делает выбранный вами элемент DOM редактируемым и частью порядка фокусировки документа. Кроме того, API EditContext также предоставляет информацию о состоянии редактируемого текста, что позволяет вам отобразить его нестандартным способом. Предоставляемая вам информация включает:

• Текущее содержимое текста.
• Текущее выделение.
• Происходит ли ввод с помощью IME, и необходимо ли применять форматы текста.

Если вы используете API EditContext с элементом <canvas>, убедитесь, что текст также доступен для вспомогательных технологий. Экранные читатели не могут прочитать текст в элементе <canvas>. Например, вы можете сохранить отдельный просмотр текста в скрытом элементе DOM, который представлен для экранных читателей.

Чтобы использовать API EditContext, вам нужно создать экземпляр интерфейса EditContext и прикрепить его к элементу DOM, который вы хотите сделать редактируемым, используя свойство editContext. Элемент DOM может быть любым элементом, включая <div> или <canvas>.

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

const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;

Экземпляр EditContext может быть прикреплен только к одному элементу DOM за раз.

Прикрепление экземпляра EditContext к элементу DOM делает элемент фокусируемым, как часть порядка фокусировки документа. Пользователь может вводить текст в элемент с помощью метода ввода по своему выбору, и вы можете использовать события, генерируемые экземпляром EditContext для отображения текста и выделения.

При использовании API EditContext полезно строить свой опыт редактирования как модель и представление.

Экземпляр EditContext представляет модель вашей области редактирования. Его внутреннее состояние обновляется при получении ввода текста и при изменении выделения.

Затем вы можете отобразить текст и выделение в представлении, используя информацию, предоставляемую экземпляром EditContext , однако ваше представление не обязательно должно точно соответствовать модели. Вы можете отображать текст любым желаемым образом.

EditContext Экспериментальная

Интерфейс EditContext — это JavaScript-отражение контекста редактирования текста, который обычно прозрачно предоставляется браузером при использовании стандартных областей редактирования, таких как textarea. EditContext предоставляет состояние редактируемого текста, включая информацию о самом тексте, текущем выделении или местоположении текста в пользовательском интерфейсе приложения.

TextFormat

Интерфейс TextFormat используется для представления определенных форматов, которые должны быть применены к диапазонам текста, когда пользователь вводит текст в окне IME.

• Использование API EditContext