Инструменты разработчика · Редактор HTML WYSIWYG
Почему execCommand устарел и что вместо него используют редакторы браузеров
· Как это работает
HTML довольный и редактируемый рабочий процесс разработчика
Описывается взлет и падение document.execCommand, почему его вывод был непоследовательным и как современные редакторы вместо этого используют Selection, Range и beforeinput.
Однострочная полужирная кнопка, которая перестала быть безопасной — открывается с помощью execCommand('bold') и предупреждения об устаревании.
Жирная кнопка может быть одним вызовом: сфокусируйтесь на поверхности редактирования, затем попросите `document.execCommand` применить `bold` к текущему выделению. ToolAcre по-прежнему использует этот путь, поскольку браузер владеет курсором и выбранным диапазоном внутри своего элемента contenteditable. Компактный вызов удобен, но удобство не делает его результирующее дерево предсказуемым.
Кодекс рассматривает отказ как обычную возможность. Его командная оболочка перехватывает исключение, объявляет, что браузер отклонил действие, и направляет средство записи в исходный режим. Этот запасной вариант более честен, чем обещание, что один щелчок на панели инструментов всегда создает один конкретный элемент или работает одинаково в каждом движке.
Что делал execCommand и откуда он взялся — объясняет его происхождение в ранних версиях Internet Explorer и его распространение во всех браузерах.
Одна и та же оболочка управляет жирным шрифтом, курсивом, неупорядоченными и упорядоченными списками, удалением форматирования, отменой и повтором действий, форматированием блоков, связями и отключением связей. Это команды, которые фактически присутствуют на панели инструментов; эта статья не расширяет список выравниванием, цветами, шрифтами, таблицами, изображениями или другими знакомыми функциями форматированного текста, которые реализация никогда не предоставляет.
Каждая команда выполняется с редактируемым в реальном времени DOM. После этого панель обновляет свой источник, предварительный просмотр, количество слов и отчет об удалении из текущего внутреннего HTML. Таким образом, сохраненный результат не является журналом команд. Это отфильтрованная сериализация любой структуры, которую браузер оставил после выполнения запрошенной операции или отказа от нее.
Почему команда API устарела: браузеры могут создавать разные фигуры DOM
Устаревание имеет значение, поскольку API не дает автору-редактору точный структурный контракт для каждой мутации. Ограничения ToolAcre явно предупреждают, что поведение разных механизмов различается, особенно в отношении вложенных списков. Видимый список может быть приемлемым, если его варианты вложенности или оболочки отличаются от разметки, созданной другим браузером.
Ни один источник репозитория не поддерживает утверждение о том, что каждый браузер, версия или команда имеет определенный результат совместимости. Безопасное утверждение более узкое: эта реализация вызывает устаревший API, перехватывает отказ и предлагает прямое редактирование исходного кода в качестве запасного хода. Протестируйте браузер и операцию, которую вы собираетесь использовать, вместо того, чтобы экстраполировать матрицу.
Выбор и Диапазон являются подходящими альтернативами, но этот инструмент их не реализует.
Выбор и диапазон могут описывать выбранные границы DOM и поддерживать явные манипуляции с деревом, но ToolAcre не реализует механизм форматирования замены с их помощью. Именование этих API так, как если бы они были текущим путем к коду, привело бы к неверному описанию продукта. Здесь команда браузера остается мутатором, а дезинфицирующее средство остается границей вывода.
Пользовательская модель может иметь метки, блоки, транзакции и сопоставления выбора, но это другая архитектура продукта с другими тестами. Этот легкий редактор намеренно избегает претензий на такое оборудование. Его проверяемый контракт заключается в том, что визуальные действия могут создавать зависящие от браузера DOM, в то время как исходный режим показывает отфильтрованную разметку, которая фактически будет скопирована или загружена.
beforeinput не является частью пути форматирования этого редактора
Реализация также не перехватывает `beforeinput` для перевода намерений редактирования в пользовательские транзакции. События ввода просто вызывают обновление после того, как браузер изменил поверхность. Вставка и удаление являются исключениями: эти события предотвращаются, их буфер обмена или передаваемые полезные данные фильтруются, и вставляется только результирующий HTML или обычный текст.
Это различие предотвращает широкие архитектурные претензии. ToolAcre владеет шлюзом вставки, но не каждой мутацией нажатия клавиши. Обычные команды ввода, удаления, ввода и панели инструментов остаются операциями редактирования браузера. Дезинфицирующее средство проверяет их сериализованный вывод; он не превращает редактор в среду, управляемую перед вводом, и не нормализует каждую промежуточную мутацию DOM.
Рабочий пример: проверьте выходные данные устаревшей команды, которые действительно создает этот редактор.
Для конкретной проверки введите два коротких предложения, выделите одну фразу и нажмите жирный шрифт. Переключитесь на источник HTML и проверьте элемент вокруг этой фразы. ToolAcre сопоставляет устаревший `b` с `strong` во время очистки, поэтому отфильтрованный результат может быть семантическим, даже если команда оперативного редактирования изначально выбрала устаревший тег.
Повторите со списком, а затем отмените. Панель инструментов отправляет `insertUnorderedList` и `undo`; он не ведет отдельную историю приложений. Если браузер отказывает, об этом говорит регион статуса. Если вложение выглядит странным, поддерживаемым путем исправления является исходный режим. Доказательством является наблюдаемый результат, а не надпись на кнопке.
Что сюда не входит: здесь не реализована замена архитектуры редактора.
В этой статье не заявлена поддержка современной заменяющей системы команд, совместных транзакций, детерминированных кроссбраузерных деревьев или пользовательского стека отмены. Он также не определяет поведение сочетаний клавиш, поскольку источник определяет действия панели инструментов, а не реестр ярлыков. Неподдерживаемые функции остаются скорее упущениями, чем подразумеваемыми возможностями.
Безопасность не зависит от выбора команды. Фильтры белого списка создают разметку, а предварительный просмотр помещается в песочницу без сценариев, но дезинфицирующее средство явно отказывается от использования в качестве общего фильтра враждебного ввода XSS. Серверу, принимающему ненадежный контент публикации, по-прежнему требуется соответствующее средство очистки HTML5-парсера на стороне сервера и политика, специфичная для места назначения.
Вывод: владейте DOM, а не командой — обобщает путь миграции и то, как полученная разметка является тем, что вы проверяете с помощью инструмента WYSIWYG-to-HTML.
Собственный результат вы можете проверить. В этом редакторе команда запрашивает браузер изменить редактируемое содержимое дерева, затем список разрешений перезаписывает сериализацию этого дерева в поддерживаемое подмножество. Режим исходного кода обеспечивает передачу управления и предоставляет практическую возможность исправления, когда поведение редактирования в браузере неудобно или непоследовательно.
Используйте одноразовый образец в том же браузере, что и ваша настоящая работа. Выполняйте только отправленные команды, проверяйте ссылки и вложенность, тестируйте отмену, прежде чем полагаться на нее, и копируйте отфильтрованный HTML только после его прочтения. Этот рабочий процесс учитывает устаревание, не делая вид, что ToolAcre уже заменил базовое редактирование API.