Визуальный редактор HTML

О визуальном HTML-редакторе

Визуальный HTML-редактор позволяет оформлять текст кнопками и получать HTML-код для сайта, статьи или описания товара. В нем можно задать заголовки и списки, выделить фрагменты, добавить ссылки и блоки кода. Готовую разметку можно скопировать или скачать в файле .html.

Что означает WYSIWYG

В режиме WYSIWYG пользователь редактирует видимое представление документа, а редактор формирует HTML-элементы для заголовков, абзацев, списков и выделений. Это удобно для подготовки текстового блока без ручного набора каждого тега.

Получаемый HTML задает структуру. Точное оформление после вставки на сайт зависит от его CSS: визуальное совпадение с этой страницей не гарантируется. Редактор не создает макет всей страницы с навигацией, стилями и адаптивной сеткой.

Семантика HTML: зачем различать абзац и заголовок

HTML-элемент сообщает роль содержимого. Абзац объединяет связный текст, заголовок называет раздел, список показывает набор пунктов или последовательность. Жирное начертание абзаца само по себе не превращает его в заголовок.

При подготовке блока для сайта сначала задавайте структуру, а затем выделение отдельных фрагментов. Это помогает сохранить понятный порядок разделов после переноса в другой шаблон, где внешний вид элементов может отличаться. Уровень заголовка нужно согласовать со страницей публикации.

Два представления одного документа

Визуальная область показывает документ, а поле исходного HTML содержит его разметку. При ручной правке кода они синхронизируются через «Применить HTML», а не обязательно в момент ввода каждого символа. Это позволяет подготовить фрагмент целиком перед заменой видимого документа.

Фильтрация оставляет поддерживаемую структуру и удаляет запрещенные элементы или атрибуты. Она не восстанавливает оформление офисного документа и не подключает стили вашего сайта. После вставки проверьте прежде всего смысловые элементы, ссылки и списки, затем внешний вид уже в принимающей системе.

Как оформить текст и добавить ссылку

Введите текст в области документа, выделите фрагмент и нажмите нужную кнопку на панели форматирования. Подсказки к значкам показывают названия действий. Для заголовков есть кнопки H1, H2 и H3, для перечней доступны нумерованный и маркированный списки. Чтобы вернуть заголовок к обычному абзацу, повторно нажмите кнопку его уровня.

Для ссылки выделите ее текст и нажмите значок цепочки «Ссылка». В открывшемся окне заполните «Адрес ссылки» и нажмите «Применить ссылку». Поддерживаются HTTP, HTTPS, mailto, пути от корня сайта и якоря. Если текст не выделен, редактор вставит сам адрес. Повторное нажатие активной кнопки ссылки убирает ее с выделенного фрагмента.

Кнопки «Отменить» и «Повторить» позволяют пройти по истории изменений текущего документа, включая применение HTML. «Разделитель» вставляет горизонтальную линию в позицию курсора. Для примеров команд используйте строчный код внутри абзаца или отдельный блок кода.

Работа с исходным HTML

«Исходный HTML» отражает правки визуального документа. Если изменить код вручную, нажмите «Применить HTML», чтобы обновить видимую область. «Копировать HTML» и «Скачать HTML» обрабатывают текущий исходник через фильтр разрешенной разметки. «Очистить» удаляет документ и код.

При применении и вставке удаляются скрипты, обработчики событий, стили, изображения и внешние встраивания. Редактор преобразует оставшуюся разметку в поддерживаемую структуру документа. HTML из письма или офисного редактора может потерять оформление. Видео, формулы и вставка файлов не поддерживаются.

Если HTML содержит таблицу, редактор сообщает об ограничении и оставляет визуальный документ без изменений. Таблицы нельзя редактировать визуально. Их разметку можно сохранить в поле «Исходный HTML», скопировать или скачать без применения к документу. Это позволяет перенести код в другой редактор без превращения ячеек в обычный текст.

Объем HTML ограничен 200000 символами, отдельно ограничены сложность и глубина дерева. Для публикации проверьте итог в целевом шаблоне и соблюдайте правила обработки пользовательского HTML на стороне принимающего приложения.