Инструменты разработчика · Редактор HTML WYSIWYG
Что происходит, когда вы вставляете документы Word или Google в веб-редактор
· Как это работает
HTML довольный и редактируемый очистка текста
Объясняет, что несут в себе вставки форматированного текста, от стилей mso-до элементов-оболочек и стеков шрифтов, и показывает, как читать полученную разметку до того, как она попадет на ваш сайт.
В Word это выглядело нормально — открывается вставленной статьей, интервалы и шрифты которой не соответствуют дизайну сайта.
Абзац, скопированный из текстового процессора, может выглядеть в исходном виде безупречным и иметь шрифты, интервалы и обертки, которые конфликтуют с сайтом. ToolAcre не сохраняет эту презентацию целиком. Его прослушиватель вставки перехватывает операцию до вставки исходной расширенной разметки и вместо этого выбирает отфильтрованное представление.
Важным доказательством является исходный вид, а не сходство первого визуального впечатления с исходным документом. Редактор намеренно узкий: заголовки, абзацы, выделение, списки, цитаты, кодоподобные элементы и ссылки могут сохраниться, в то время как контейнеры макета, имена классов, идентификаторы и атрибуты встроенного стиля не принадлежат его выходному контракту.
Буфер обмена содержит больше, чем просто текст — поясняется, что копия с форматированным текстом включает в себя вариант HTML наряду с обычным текстом.
Буфер обмена может предоставить `text/html` и `text/plain` для одной операции копирования. Обработчик запрашивает и то, и другое. Если полезная нагрузка HTML существует, она очищает эту строку и вставляет переписанный фрагмент с `insertHTML`; только когда расширенный HTML отсутствует, он вставляет простую полезную нагрузку с `insertText`.
Этот приоритет подтвержден кодом для этой панели, а не является универсальным утверждением для каждого приложения. Это объясняет, почему насыщенная паста может сохранять список, теряя при этом внешний вид. Исходное приложение записало буфер обмена HTML, но список разрешений ToolAcre решает, какая часть будет допущена к редактируемой поверхности.
Что этот редактор удаляет из расширенной пасты: неподдерживаемые элементы, атрибуты и комментарии.
Неподдерживаемые элементы обрабатываются двумя способами. Неизвестные обычные оболочки разворачиваются, поэтому их слова остаются, а скрипт, стиль, iframe, форма, SVG, MathML и другие рискованные или нередакционные контейнеры удаляются вместе с их содержимым. Комментарии и типы документов также отбрасываются, а не переносятся в черновик.
Атрибуты обращены ко вторым воротам. Класс, идентификатор, стиль, атрибуты данных и все обработчики событий удаляются, поскольку разрешенные атрибуты именуются для каждого элемента. Это означает, что имена классов и встроенное представление, специфичные для исходного кода, не могут противостоять целевой таблице стилей после того, как ToolAcre отфильтровал вставку, хотя полезные исходные стили также могут исчезнуть.
Почему оболочки и стили, специфичные для источника, не попадают в список разрешенных
Репозиторий не предоставляет захваченные фикстуры Word или Google Docs, поэтому в этой статье не приводятся точные классы `mso-`, внутренние идентификаторы или последовательности оболочек для конкретных выпусков. В нем может быть указано следствие, подтвержденное списком разрешений: классы и стили удаляются независимо от того, какое исходное приложение их предоставило.
Это правило независимости от источника является более сильным редакционным руководством, чем хрупкий каталог. Проверьте уведомление об удалении после вставки. В нем фиксируются уникальные причины, такие как неподдерживаемая оболочка, запрещенный атрибут или отклоненный URL. В отчете рассказывается, что эта реализация отбросила, не пытаясь идентифицировать приложение, которое изначально сгенерировало каждый фрагмент.
Рабочий пример: вставьте три абзаца и прочитайте отфильтрованную разметку.
Скопируйте три коротких абзаца, выделив среднее предложение жирным шрифтом, а последнее — списком. После вставки переключитесь в исходный режим. Элементы Paragraph, Strong, ul и li находятся в разрешенном списке, а окружающие элементы div разворачиваются, а атрибуты стиля исчезают. Теги Legacy b и i нормализуются до Strong и em.
Теперь добавьте атрибут небезопасного события в одноразовый исходный образец и вернитесь в визуальный режим. Атрибут удаляется до того, как источник станет DOM. Это демонстрирует границы редактирования, а не безопасную публикацию враждебных материалов. Проект явно предупреждает о различиях в анализаторах и требует подходящего средства очистки на стороне сервера для ненадежного контента.
Вставка обычного текста используется только в том случае, если буфер обмена не предоставляет вариант HTML.
Вставка обычного текста — это запасной вариант, а не выбираемая пользователем команда «вставить без форматирования» на этой панели инструментов. Если буфер обмена предоставляет HTML, ToolAcre берет эту ветвь. Ярлык браузера или операционной системы может предоставлять только обычную вставку, но репозиторий не определяет и не обещает конкретного поведения ярлыка.
Если доступен только текст, `insertText` просит браузер поместить эти символы в курсор. Любая структура абзацев, созданная впоследствии, остается объектом редактирования браузера. Используйте представление исходного кода, чтобы добавлять заголовки или списки, а не предполагать, что разрывы строк из другого приложения автоматически становятся структурой, которую ожидает ваш CMS.
Что здесь не распространяется — правила автоматической очистки, фильтры вставки, специфичные для CMS, или сохранение отслеживаемых изменений.
Этот рабочий процесс не сохраняет отслеживаемые изменения, комментарии, макет страницы, шрифты, цвета, таблицы или изображения. Изображения намеренно отсутствуют, поскольку разрешенное изображение создает исходящий запрос и поверхность обработчика ошибок. Редактор также не имеет профиля очистки для конкретного источника или переключателя, который обещает преданность одному офисному пакету.
Локальная вставка не гарантирует, что конечный пункт назначения примет то же подмножество. CMS может удалить больше тегов, переписать ссылки или применить свою собственную политику. Сравните вывод редактора с целевой документацией и сохраните оригинальную копию, если потеря неподдерживаемого форматирования приведет к удалению информации, а не просто представления.
Вывод: посмотрите, прежде чем публиковать — кратко описывается привычка проверять и как ToolAcre's HTML WYSIWYG редактор позволяет вставлять локально и просматривать разметку, прежде чем она куда-либо пойдет
Посмотрите перед публикацией: вставьте репрезентативный, неконфиденциальный фрагмент, прочитайте предупреждение об удалении, проверьте источник и просмотрите отфильтрованный результат. ToolAcre предоставляет один явный список разрешенных, а не молча переносит иностранную презентацию на ваш сайт. Это делает очистку видимой, но не подтверждает безопасность произвольного HTML.
Если основная структура исчезла, восстановите ее, добавив поддерживаемые заголовки, абзацы, списки, акценты и ссылки. Если цель принимает меньшее, упростите еще больше. Правильный артефакт не является ближайшей визуальной имитацией исходного документа; это проверенная разметка, значение которой и политика назначения понятны.