Альтернативы устаревшему Document.execCommand() в JS

Быстрый ответ

Для замены document.execCommand() в стилизации текста используйте classList или style, а для работы с буфером обмена – Clipboard API.

Вот пример стилизации текста:

// Переключаем класс 'bold' в родительском элементе активного узла
document.getSelection().focusNode.parentElement.classList.toggle('bold');

И так же пример работы с буфером обмена:

async function copyText(text) {
  // Пытаемся скопировать текст в буфер обмена и обрабатываем возможные ошибки
  await navigator.clipboard.writeText(text).catch(console.error);
}

Так как document.execCommand() устарел, универсальной замены, которая подойдет всем, не существует. Однако, есть различные современные веб-API для конкретных задач.

Навигация среди разнообразия браузеров и проблем IME

Несмотря на устаревание, document.execCommand() обладает широкой поддержкой в различных браузерах и остается полезным инструментом, особенно при работе с вводом IME и управлением курсором в разнообразных браузерах.

Даже устаревший execCommand() важен для решения задач связанных с IME. К примеру, это касается точного ввода текста при использовании клавиатур в стиле GBoard на Android.

Создание приложений WYSIWYG

Для замены execCommand() при создании WYSIWYG-редактора используются различные API, например, Input Events Level 2 и метод .cloneNode. Важно также использовать семантические HTML-теги, например <em> и <strong>, в отличие от <span>. Так же рекомендуется провести тщательное тестирование на кроссбраузерность, особенно для браузеров на движке Gecko.

Примеры кода для современных API

Вот несколько примеров использования современных альтернатив API:

• navigator.clipboard.writeText() и navigator.clipboard.readText() с помощью Clipboard API для копирования и вставки текста.
• document.createRange() и метод Range.surroundContents() для редактирования форматированного текста.
• Методы insertBefore() и replaceChild() для быстрой и продуктивной работы с DOM.

Эти методы помогут вам писать чистый, современный код.

Создание доступных веб-функций

Важно учитывать доступность для разработчиков. Применяемые изменения в DOM должны быть построены таким образом, чтобы они корректно воспринимались скринридерами и другими ассистивными технологиями.

Визуализация изменений в веб-API

Сравнение старых и новых инструментов для работы с веб-текстом:

Старый набор инструментов: [🖌️ (execCommand)]
Новый набор инструментов: [✂️ (Clipboard API), 📝 (ContentEditable), 🎨 (Input Events), 🔒 (Document.execCommand для защиты контента)]

Каждый инструмент из нового набора специализирован на выполнении определенных функций.

Продолжение работы с надежными фреймворками

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

Полезные материалы

1. Document: execCommand() method – Web APIs | MDN — Более детальная информация об execCommand() и его альтернативах.
2. "execCommand" | Can I use... Support tables for HTML5, CSS3, etc — Смотрите совместимость execCommand() с различными браузерами.
3. Web Editing Working Group | editing — Будущие стандарты и API для редактирования текста от W3C.
4. Newest 'execcommand' Questions – Stack Overflow — Обсуждение альтернатив и проблем с execCommand() в сообществе разработчиков.
5. contenteditable – HTML: HyperText Markup Language | MDN — Информация об атрибуте contenteditable как об альтернативе execCommand().
6. Quill – Your powerful rich text editor — QuillJS, современный текстовый редактор, который заменил execCommand().
7. ProseMirror — ProseMirror, мощная библиотека для текстовых редакторов, заменившая execCommand().