Визуальный редактор 1С-Битрикс позволяет переключиться из режима WYSIWYG в режим правки исходного HTML-кода. Это нужно, когда мышью нужный результат не получается: вставить свой блок, поправить атрибуты тега или очистить «мусорную» разметку.
Когда нужен режим исходного кода
Визуальный режим удобен для набора текста и простого форматирования, но у него есть предел. К прямой правке HTML прибегают, когда:
- нужно вставить готовый фрагмент разметки (виджет, форму, чужой embed-код);
- требуется задать тегу атрибут, недоступный из панели:
id,data-*,rel,target; - визуальный редактор «съел» или переупаковал верстку и её нужно вернуть вручную;
- надо удалить лишние пустые теги
<p></p>,<span>и инлайновые стили после копирования из Word; - нужно быстро найти конкретный кусок и поправить его, не листая страницу мышью.
Важно понимать: речь идёт о содержимом рабочей области страницы, а не о полном HTML-документе. Тег <head>, подключение шаблона и меню в этот код не входят — они берутся из шаблона сайта.
Как переключиться в правку HTML
Откройте нужную страницу на редактирование из публичной части (Изменить страницу) или через Контент → Структура сайта → Файлы и папки, выбрав у файла действие «Изменить как HTML».
- Убедитесь, что страница открыта в визуальном редакторе, а не в текстовом поле.
- На нижней панели редактора нажмите кнопку «Изменить код» (переключатель
Визуально / Код). - Область содержимого сменится на текстовое поле с HTML-разметкой страницы.
- Внесите правки и нажмите ту же кнопку ещё раз, чтобы вернуться в визуальный режим и проверить результат.
- Сохраните страницу кнопкой «Сохранить».
Если сайт использует эстор-режим или расширенный HTML-редактор, кнопка может называться иначе, но принцип один: переключатель между визуальным представлением и исходным кодом.
Что редактор делает с вашим кодом
Главный источник неожиданностей — то, что визуальный редактор при переключении режимов нормализует разметку. Он может изменить регистр тегов, закрыть незакрытые элементы, переставить атрибуты и заменить некоторые конструкции своими.
| Действие редактора | Что происходит с кодом |
|---|---|
| Возврат из «Код» в «Визуально» | HTML разбирается и пересобирается — «нестандартный» код может измениться |
| Вставка из буфера | Могут добавиться инлайновые стили и лишние <span> |
| Пустые строки | Часто оборачиваются в <p> или <br> |
| Скрипты и iframe | Могут вырезаться настройками безопасности редактора |
Практический вывод: тонкую ручную разметку правьте в режиме кода и сохраняйте страницу, не возвращаясь в визуальный режим — так редактор не тронет ваш HTML.
Вставка собственного фрагмента разметки
Чтобы аккуратно добавить свой блок HTML:
- Переключитесь в режим «Изменить код».
- Найдите нужное место в разметке (по тексту, который вас окружает).
- Вставьте валидный фрагмент — с корректно закрытыми тегами и без лишних inline-стилей.
- Для собственных классов используйте существующие классы шаблона сайта, иначе стилей у блока не будет.
- Сохраните страницу.
Если фрагмент содержит скрипт или <iframe> и после сохранения он пропал, значит сработала защита редактора. В этом случае вставку скриптов лучше выносить в отдельный включаемый файл через компонент, а не в тело страницы.
Очистка «грязного» HTML
После копирования текста из Word, PDF или другого сайта в код попадает много лишнего: class="MsoNormal", инлайновые style, вложенные <span>. Такой контент ломает единый стиль сайта.
- Перед вставкой пользуйтесь кнопкой «Вставить как текст» или «Вставить из Word» на панели редактора — она отсекает часть мусора.
- Оставшиеся артефакты чистите вручную в режиме кода: удаляйте атрибуты
style, пустые<span>и повторяющиеся<p>. - Проверяйте, что заголовки размечены тегами
<h2>–<h4>, а не жирным текстом внутри<p>— это важно и для верстки, и для SEO.
Чистая семантическая разметка позже проще поддерживается и корректнее выглядит в мобильной версии.
Частые ошибки
Типичные проблемы при работе с исходным кодом страницы:
- Незакрытые теги. Один забытый
</div>может «поехать» всю верстку страницы. Проверяйте парность тегов. - Потеря правок после переключения. Вернулись в визуальный режим — и редактор пересобрал код. Сохраняйте прямо из режима кода.
- Пропавший скрипт или iframe. Их вырезает защита редактора; выносите такой код в компонент или включаемую область.
- Свои классы без стилей. Класс, которого нет в CSS шаблона, ничего не даёт — используйте классы темы или добавляйте стили в шаблон.
- Правка «полного» HTML. Попытка вставить
<html>,<head>или<body>в тело страницы ломает шаблон — редактируется только содержимое рабочей области. - Кириллица и спецсимволы. Ручной ввод сущностей вроде
без нужды засоряет текст; вставляйте неразрывный пробел точечно.
Итог
Режим исходного HTML-кода в редакторе 1С-Битрикс — инструмент для точечной ручной правки: вставки своих фрагментов, добавления атрибутов и очистки разметки. Ключевое правило — помнить, что при возврате в визуальный режим редактор пересобирает код, поэтому тонкую верстку сохраняйте прямо из режима «Код».
Работайте с валидным, семантическим HTML, используйте классы шаблона и держите под рукой панель вставки без форматирования — тогда контент останется чистым и стабильным.