Онлайн HTML-редактор

HTML-редактор онлайн — это браузерный инструмент, который одновременно показывает текст так, как его увидит читатель, и исходный код этой же страницы. Обе панели связаны: правка в визуальном окне сразу меняет код, правка кода сразу меняет вид. Редактор от ToolsPivot решает две конкретные проблемы контент-менеджера: грязная разметка при вставке из Word или Google Документов и постоянные переключения между режимом правки и предпросмотром. Работа идёт целиком в браузере, интерфейс доступен на 18 языках, включая русский.

Обзор HTML-редактора от ToolsPivot

Основная функциональность

Редактор состоит из двух панелей, синхронизированных в реальном времени. Визуальная часть построена на нативной области contenteditable, поэтому браузер отдаёт настоящие теги, а не имитацию форматирования. Панель кода — это CodeMirror 5.51 в режиме htmlmixed с нумерацией строк и подсветкой синтаксиса. При вводе текста ToolsPivot прогоняет разметку через js-beautify и записывает отформатированный результат в код; правка кода возвращается обратно в визуальное окно через innerHTML. Библиотеки лежат на самом сайте, обращений к внешним CDN нет.

Целевые пользователи и сценарии использования

Чаще всего редактором пользуются контент-менеджеры интернет-магазинов, SEO-специалисты и копирайтеры, которые готовят материал в Word или Google Документах, а публикуют через 1С-Битрикс, WordPress, Tilda или карточки Wildberries и Ozon. Вторая группа — верстальщики email-рассылок и авторы Дзена, которым нужен предсказуемый код без классов и инлайновых стилей чужой CMS.

Проблема и решение

Текст, скопированный из Word, тащит за собой классы MsoNormal, стили mso-, теги <o:p> и десятки пустых <span>. В админке 1С-Битрикс такая вставка ломает вёрстку: списки превращаются в обычный текст с символами-маркерами, размер шрифта не переносится, а чужие стили перебивают шаблон. Редактор чистит буфер обмена до того, как содержимое попадёт в документ, и отдаёт разметку, которую CMS примет без правок.

Основные преимущества HTML-редактора

• Двусторонняя синхронизация: вы видите вёрстку и код одновременно, без кнопки «Источник» и без потери позиции курсора при переключении.
• Чистая вставка из Word: мусорная разметка отсекается на этапе вставки, а не после публикации, когда страница уже уехала в продакшен.
• Два инструмента в одном: в Рунете визуальный редактор и очиститель кода — это обычно два разных сервиса и два копипаста между ними.
• Проверка тегов с номерами строк: незакрытый <div> находится за секунду, а не методом визуального поиска по портянке кода.
• Экспорт в Markdown: тот же материал уходит в README, Telegram-бота или статический генератор без ручного переписывания.
• Ничего не уходит на сервер: набор текста, чистка, минификация и проверка выполняются в браузере. Для контроля веса страницы пригодится соотношение кода и текста.
• Черновик не теряется: содержимое автосохраняется в localStorage и восстанавливается после случайного закрытия вкладки.
• Тёмная тема и полный экран: тема dracula и запоминание выбора помогают при долгой работе с кодом вечером.

Ключевые функции HTML-редактора

• Блочное форматирование: выпадающий список с абзацем, заголовками H1–H4, цитатой и блоком кода.
• Строчное оформление: жирный, курсив, подчёркивание, зачёркивание, надстрочный и подстрочный индекс, строчный код, снятие форматирования.
• Работа с текстом: размер шрифта, цвет и заливка. Перед вёрсткой полезно прогнать материал через проверку грамматики: редактор следит за тегами, а не за орфографией.
• Структура документа: маркированные и нумерованные списки, отступы, четыре варианта выравнивания.
• Вставка объектов: ссылки, изображения по URL или загрузкой, таблицы с добавлением строк и столбцов, горизонтальная линия и 36 спецсимволов.
• Адаптивное видео: ссылка на YouTube или Vimeo превращается в отзывчивый iframe без ручной вёрстки обёртки.
• Меню чистки: удаление инлайновых стилей, снятие классов и id, удаление пустых тегов, схлопывание пробелов, перевод в чистый текст.
• Форматирование и минификация: js-beautify раскладывает код по отступам, минификатор собирает его в одну строку. Для боевой сборки лучше подходят сжатие HTML и минификация JavaScript.
• Поиск и замена: аддоны search и dialog CodeMirror работают по исходному коду, а не по видимому тексту.
• Валидация разметки: токенизатор со стеком тегов учитывает необязательное закрытие li, tr, td, p и пропускает <script>, <style> и комментарии.
• Экспорт результата: копирование HTML, копирование Markdown через Turndown, скачивание готового .html-документа.
• Импорт из облака: локальный файл через FileReader, Google Диск через Picker и Dropbox через Chooser.

Как работает HTML-редактор ToolsPivot

1. Откройте страницу и вставьте текст из Word, Google Документов или готовый фрагмент кода. Фильтр вставки сработает автоматически.
2. Правьте документ в любой из панелей. Флаг-предохранитель не даёт панелям зациклиться друг на друге при синхронизации.
3. Нажмите «Очистить HTML» или выберите точечное действие из меню чистки, если нужно снять только классы или только стили.
4. Запустите проверку тегов. Редактор покажет незакрытые и несовпадающие теги с номером строки.
5. Отформатируйте код кнопкой beautify или сожмите минификатором — в зависимости от того, куда пойдёт результат.
6. Скопируйте HTML, скопируйте Markdown или скачайте файл. При переносе на сайт пригодится генератор мета-тегов.

Когда использовать HTML-редактор

Редактор нужен, когда готовый текст надо превратить в предсказуемую разметку и увидеть результат до публикации. Он экономит больше всего времени там, где материал пишут в одном инструменте, а публикуют в другом. Если вы верстаете страницу целиком со стилями и скриптами, задача другая: здесь речь о содержимом, а не о макете. Практическое правило простое. Если результат вашей работы — кусок HTML, который кто-то вставит в поле «Детальное описание» или в тело письма, редактор закрывает задачу целиком.

• Перенос статьи из Word: убрать наследие текстового процессора до того, как код попадёт в инфоблок Битрикса.
• Правка чужого кода: разобрать присланный фрагмент, найти сломанный тег и вернуть заказчику рабочую версию.
• Описания товаров: собрать таблицу характеристик для карточки на маркетплейсе с одинаковой структурой для всей категории.
• Письма и рассылки: подготовить блок с инлайновыми стилями и сразу проверить, что теги закрыты.
• Перевод в Markdown: перенести накопленные HTML-материалы в документацию или базу знаний.
• Обучение вёрстке: посмотреть, какой код рождается за каждым нажатием кнопки на панели.
• Правка на чужом компьютере: открыть браузер и работать, не устанавливая редактор.

Есть и обратные случаи. Для сравнения двух версий одного файла удобнее сравнение версий кода, а полноценный сайт со скриптами всё-таки собирают в настольной среде разработки.

Примеры использования

Каталог интернет-магазина

Контекст: контент-менеджер переносит 40 описаний товаров из Google Таблиц в 1С-Битрикс.

• Вставка описания в редактор, автоматическая чистка стилей таблицы.
• Удаление классов и id через меню чистки.
• Проверка тегов перед копированием в инфоблок.

Результат: карточки наследуют стили шаблона, вёрстка каталога не разъезжается в админке.

Статья для корпоративного блога

Контекст: автор пишет материал в Word, редактор публикует его на сайте компании.

• Вставка текста с сохранением списков и заголовков.
• Замена заголовка H1 на H2, потому что H1 подставляет шаблон.
• Добавление изображений и адаптивного видео с YouTube.

Результат: публикация занимает 10 минут вместо получаса ручной правки тегов. Иллюстрации перед загрузкой стоит прогнать через сжатие изображений.

Разбор кода конкурента

Контекст: SEO-специалист изучает структуру заголовков на чужой странице.

• Выгрузка разметки через просмотр исходного кода сайта.
• Форматирование минифицированного кода кнопкой beautify.
• Чтение структуры в панели с нумерацией строк.

Результат: иерархия заголовков и блоков видна за пару минут вместо ручного разбора одной длинной строки.

Прототип лендинга

Контекст: фрилансер показывает заказчику черновик структуры страницы.

• Набор блоков в визуальной панели с заглушками текста.
• Заполнение пустот через генератор текста-рыбы.
• Скачивание .html-файла и отправка заказчику.

Результат: согласование структуры до вёрстки, без правок готового макета.

Русская типографика: что редактор не делает за вас

Редактор работает с тегами, а не с правилами русского языка, и это стоит учитывать. Некоторые сервисы Рунета обещают автоматическую веб-типографику, но здесь такого фильтра нет, поэтому проверьте четыре вещи вручную перед публикацией. Обратная сторона у этого честная: автотипографика иногда портит код, подставляя сущности внутрь атрибутов и ломая ссылки. Ручной контроль медленнее, но предсказуемее.

• Кавычки: Word подставляет «ёлочки» корректно, но при вставке из англоязычных источников остаются прямые кавычки.
• Тире и дефис: длинное тире и дефис в HTML выглядят похоже, проверяйте их через поиск и замену.
• Буква «ё»: редактор не восстанавливает её автоматически, орфографию берёт на себя браузер.
• Неразрывные пробелы:   после предлогов и в числах вроде «2 990 ₽» ставится руками или через кодирование HTML-символов.

Данные, приватность и 152-ФЗ

Всё, что вы набираете, чистите, проверяете и экспортируете, остаётся в браузере — на сервер это не уходит. Черновик хранится в localStorage вашего устройства, там же запоминается выбор тёмной темы. Это важно для тех, кто готовит тексты с персональными данными: договоры, анкеты, карточки сотрудников подпадают под 152-ФЗ, и лишняя передача таких данных на чужой сервер — риск, которого проще избежать. Многие онлайн-очистители кода в Рунете устроены наоборот: форма отправляет текст на PHP-скрипт, обрабатывает его там и возвращает результат.

Одна честная оговорка: импорт из Google Диска и Dropbox устроен иначе. Выбранный файл проходит через сервер, потому что docx и pdf нужно конвертировать в текст. Ключи доступа к Picker и Chooser хранятся в таблице настроек базы данных, а не в клиентском JavaScript. Если файл содержит чувствительные данные, откройте его локально — локальная загрузка через FileReader сервер не задействует. Для проверки того, что видит поисковый робот на итоговой странице, используйте симулятор поискового робота.

Часто задаваемые вопросы