Инструменты разработчика · Редактор HTML WYSIWYG
Enter против Shift+Enter: как редакторы выбирают между <p>, <div> и <br>
· Как это работает
HTML довольный и редактируемый редактирование текста
Объясняет модель абзаца, лежащую в основе редакторов браузера: почему Enter может создавать <p> или <div>, почему сочетание клавиш Shift+Enter вставляет <br> и как это определяет ваш интервал.
Почему в CMS интервал неправильный, но в редакторе все в порядке — открывается с классической проблемой двойного зазора или отсутствия зазора
Интервал, который кажется удобным в редакторе, может измениться, когда фрагмент входит в CMS, поскольку блоки получают поля из целевой таблицы стилей. Два абзаца и две строки, разделенные br, структурно различны, даже если один предварительный просмотр дает им одинаковое расстояние по вертикали.
ToolAcre раскрывает эту разницу в источнике. Он не содержит скопированных полей или встроенных стилей, поэтому интервал между абзацами берется из оболочки предварительного просмотра или более позднего места назначения CSS. Писателям следует выбирать структуру по смыслу и проверять сериализованные элементы вместо добавления пустых нажатий клавиш до тех пор, пока одно временное представление не будет выглядеть правильно.
Блочные и строчные разрывы — поясняет, что <p> и <div> — это блоки со своими полями, а <br> — это разрыв строки внутри блока.
Paragraph и div — это блочные контейнеры; br — это пустой элемент разрыва строки внутри другого потока. Этот редактор разрешает p и br, но не div. Вставленный элемент div разворачивается, сохраняя свои слова и разрешенных потомков, но при этом отбрасывая оболочку. Sanitized br выдается как `<br />`.
Почтовый адрес может состоять из одного абзаца с намеренными разрывами строк, поскольку его строки образуют одно целое. Две независимые мысли лучше представить в виде двух абзацев. Место назначения может единообразно оформлять поля p, а повторяющиеся элементы br, используемые в качестве вертикальных разделителей, кодируют внешний вид непосредственно в содержимом.
То, что здесь делает Enter, зависит от браузера и не настраивается ToolAcre.
ToolAcre не устанавливает команду разделителя абзацев по умолчанию и не перехватывает Enter. Браузер с возможностью редактирования содержимого обрабатывает ключ, а прослушиватель ввода впоследствии обновляет вывод. Ограничения репозитория предупреждают, что поведение движка различается, поэтому утверждение, что Enter всегда создает p, всегда создает div или следует одному правилу для конкретной версии, было бы изобретенным руководством по совместимости.
Затем этап очистки сужает всю поступающую сериализацию. Созданный в браузере элемент div не может сохраниться как элемент div, хотя его текст может остаться. Это может привести к тому, что окончательный источник снова будет отличаться от живого промежуточного дерева. Таким образом, режим исходного кода — это место для установки явных элементов p, когда имеет значение стабильное значение абзаца.
Мягкие перерывы могут быть записаны в исходном коде, но контракт Shift+Enter не реализован.
На панели инструментов нет кнопки «мягкого разрыва», и код не регистрирует Shift+Enter. Браузер может реализовать этот жест, но эта статья не обещает его результата. Режим источника может сохранять разрешенный br, предоставляя детерминированный способ выразить разрыв внутри абзаца после проверки визуального результата.
Поведение клавиатуры также зависит от состояния выбора и редактирования, которое модуль не проверяет. Используйте именно тот браузер, который используется в вашей работе, а затем прочитайте исходный код. Если этот жест создает нежелательный блок, перепишите фрагмент явно, а не полагайтесь на описание ярлыка, скопированное из другой среды редактора.
Рабочий пример: создайте адрес и запишите, а затем проверьте, а не прогнозируйте
Для адреса используйте режим источника, чтобы сделать один p с br между получателем, улицей и населенным пунктом. Для краткой заметки создайте два элемента p. Вернитесь в визуальный режим, в котором исходный код очищается перед вставкой, и сравните предварительный просмотр, не предполагая, что его поля соответствуют конечному веб-сайту.
Затем скопируйте HTML и проверьте фрагмент отдельно от загрузки HTML. Скопированный результат содержит очищенную разметку тела; загрузка содержит полный документ с предварительным просмотром ToolAcre CSS. Это различие может объяснить, почему открытие загруженного файла выглядит более завершенным, чем вставка скопированного фрагмента в систему с другими стилями.
Пустые абзацы и неразрывные пробелы сохраняются только в том случае, если они поддерживаются рерайтером.
Пустой разрешенный абзац может остаться, поскольку p принимается и ни одно правило не удаляет пустые блоки. Известный объект с неразрывным пробелом может стать его декодированным символом, а затем экранироваться в соответствии с реализацией локального объекта; в коде не предусмотрено правило очистки, специально предназначенное для разделительных абзацев.
Таким образом, «Санитизировать сейчас» не является средством очистки макета. Он удаляет неподдерживаемую разметку и атрибуты, балансирует теги и форматирует исходный код, но может сохранять структурно разрешенную пустоту. Намеренно удаляйте артефакты пробелов в исходном или визуальном режиме и позволяйте месту назначения CSS предоставлять нормальные поля, а не накапливать пустые блоки.
Что здесь не распространяется — CSS правила свертывания полей или конфигурация платформы редактора.
В этой статье не рассматриваются свертывание полей, настройка разделителя платформы, матрицы клавиатуры для каждого браузера или особенности расстояния между адресами электронной почты. Он также не утверждает, что предварительный просмотр воспроизводит CMS. В легкой песочнице используется собственный основной шрифт, высота строки, отступы и поведение разрыва.
Он также не считает отфильтрованную информацию универсально безопасной публикацией. Вредоносная отправка требует очистки на стороне сервера, соответствующей месту назначения, даже если одноразовый локальный предварительный просмотр остался инертным. Семантика абзацев, поведение редактирования браузера и политика безопасности — это три отдельные проблемы, которые не следует объединять в один тест «выглядит правильно».
Вывод: выберите разрыв, соответствующий значению — обобщает модель и то, как редактор HTML WYSIWYG ToolAcre позволяет проверить, какой элемент создает каждый ключ.
Выберите разрыв, соответствующий содержимому, но проверяйте, а не предугадывайте нажатие клавиши. ToolAcre предоставляет прямой доступ к исходному коду, принимает p и br, разворачивает div и показывает рендеринг в песочнице. Эти факты поддерживают повторяемый рабочий процесс без каких-либо обещаний относительно Enter или Shift+Enter.
Создайте небольшой адрес и заметку, дважды переключите режимы и убедитесь, что предполагаемая структура выдержит дезинфекцию. Если в пункте назначения имеются неожиданные пробелы, проверьте его CSS вместо того, чтобы вставлять еще пустые HTML. Стабильный смысл передается лучше, чем интервал, настроенный на один изолированный предварительный просмотр.