Инструменты разработчика · Редактор HTML WYSIWYG
Как редактор WYSIWYG превращает форматирование в HTML: объяснение contenteditable
· Как это работает
HTML довольный и редактируемый рабочий процесс разработчика
Объясняется атрибут contenteditable, который делает любой элемент редактируемым, как браузер изменяет DOM при вводе и форматировании и как этот DOM становится HTML, который вы копируете.
Вы нажали смело; откуда взялся <strong>? — открывается с промежутком между нажатием кнопки и просмотром разметки
Кнопка на панели инструментов, помеченная жирным шрифтом, напоминает кисть, но браузер должен представлять результат в дереве документа. Выделенная фраза может стать элементом <b> или <strong> в зависимости от команды редактирования и движка. Задача разработчика — превратить эти специфичные для браузера мутации в HTML, которую сможет прочитать другая страница, не принимая ни одного тега или опасного атрибута. То, что вы видите на экране, — это редактируемый DOM, а не текстовый файл с независимым слоем форматирования.
contenteditable: атрибут, который делает страницу редактируемой — объясняет хост редактирования, размещение курсора и то, как браузер управляет поведением редактирования.
contenteditable="true" делает элемент хостом редактирования. Браузер управляет перемещением, выбором, вставкой и удалением курсора внутри него с помощью дерева DOM под ним. Поверхность редактирования ToolAcre использует эту функцию браузера и предоставляет как визуальный, так и исходный режим; контент остается на странице, а не отправляется на сервер форматированного текста. Событию вставки уделяется отдельное внимание, поскольку вставленное HTML может включать в себя элементы и атрибуты, которые не должны входить в доверенный документ без проверки.
Каждое нажатие клавиши представляет собой мутацию DOM — описывает рост текстовых узлов, перенос и разделение элементов, а также почему дерево меняется, даже если текст выглядит неизменным.
Ввод текста создает или расширяет текстовые узлы; нажатие Enter может разделить блок; выделение жирным шрифтом выделяет диапазон. Точная DOM после двух кликов не обязательно будет соответствовать воображаемой разработчиком строке <strong>: браузеры выбирают разные элементы и вложенность. ToolAcre в настоящее время использует document.execCommand для форматирования. Этот API устарел, но здесь нет единообразно реализованной замены для каждой операции редактирования, поэтому редактор обрабатывает его выходные данные как ненадежные входные данные, подлежащие нормализации, а не как каноническую разметку.
От живой строки DOM до строки HTML — объясняет сериализацию отредактированного дерева в разметку, которую можно скопировать.
Чтобы скопировать HTML, редактор считывает внутренний HTML-код поверхности редактирования и передает полученную строку через список разрешений элемента /attribute. Теги, такие как b, нормализуются до семантической строгости; разрешенные ссылки проверяются на наличие приемлемых схем URL, а обработчики событий и несвязанные атрибуты удаляются. В исходном режиме текст также проходит через тот же фильтр, прежде чем вернуть его на визуальную поверхность. Это путь очистки, специфичный для редактора, а не универсальное серверное средство HTML для удаления враждебного контента от произвольных пользователей.
Рабочий пример: примечание из двух абзацев с жирной фразой — следует за DOM при вводе, выделении и выделении жирным шрифтом, а затем показывает полученную разметку.
Введите два абзаца — «Обновление проекта» и «Черновик готов», затем выберите «Черновик» во втором и нажмите жирный шрифт. Браузер может вставить <b>Draft</b> в действующий DOM. При переключении в исходный режим он проходит через дезинфицирующее средство ToolAcre, которое может выдавать <strong>Draft</strong> внутри своего абзаца после нормализации. Попробуйте вставить полезную нагрузку <img onerror="..."> в одноразовый документ: выходной белый список не включает изображения или атрибуты обработчика событий. Этот пример показывает, почему вы проверяете полученную разметку, а не предполагаете, что клик имеет одно универсальное представление HTML.
Почему одни и те же действия создают разную разметку в разных браузерах — рассказывается о поведении редактирования, специфичном для браузера, и почему редакторы нормализуют вывод.
В разных браузерах команды редактирования, разрывы строк и границы выделения реализуются по-разному. Даже идентичные видимые абзацы могут сериализоваться с разными вложенными промежутками или блочными элементами. Шаг нормализации уменьшает некоторые различия, но не делает поверхность WYSIWYG сериализатором, гарантированным стандартами. ToolAcre показывает источник рядом с визуальным результатом, поэтому вы можете исправить нечетное вложение. Его предварительный просмотр выполняется в iframe с атрибутом песочницы, не допускающим выполнения сценария, что ограничивает влияние небезопасного фрагмента, достигающего этого предварительного просмотра.
Чего это не охватывает — совместное редактирование, стеки отмены и полноценные среды редактирования выходят за рамки.
Эта страница не обещает совместного редактирования, полной истории отмены, усовершенствованного почтового клиента или полноценной среды редактирования. Contenteditable не может сам по себе решить, какую разметку принимает сторонний CMS, а строковый список разрешений не заменяет серверный дезинфицирующий анализатор HTML5, где ненадежные пользователи могут отправлять контент. Предварительный просмотр в песочнице — это отдельная защита от очистки вывода; ни один из них не делает произвольные JavaScript или враждебные URL-адреса безопасными в каждом пункте назначения.
Вывод: редактор представляет собой DOM, который вы можете видеть. Он кратко описывает механизм и то, как редактор HTML WYSIWYG ToolAcre отображает разметку, создаваемую вашим форматированием, не выходя из браузера.
Редактор — это DOM, который вы можете видеть и проверять. Редактор HTML WYSIWYG ToolAcre дает вам прямой способ сравнить действие визуального форматирования с отфильтрованным HTML, которое оно создает, локально в вашем браузере. Введите и выделите жирным шрифтом одноразовую заметку, переключитесь в исходный режим и сохраните только те элементы, которые действительно поддерживает ваш пункт назначения.