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

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-, теги и десятки пустых . В админке 1С-Битрикс такая вставка ломает вёрстку: списки превращаются в обычный текст с символами-маркерами, размер шрифта не переносится, а чужие стили перебивают шаблон. Редактор чистит буфер обмена до того, как содержимое попадёт в документ, и отдаёт разметку, которую CMS примет без правок.

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

• Двусторонняя синхронизация: вы видите вёрстку и код одновременно, без кнопки «Источник» и без потери позиции курсора при переключении.
• Чистая вставка из Word: мусорная разметка отсекается на этапе вставки, а не после публикации, когда страница уже уехала в продакшен.
• Два инструмента в одном: в Рунете визуальный редактор и очиститель кода — это обычно два разных сервиса и два копипаста между ними.
• Проверка тегов с номерами строк: незакрытый
  находится за секунду, а не методом визуального поиска по портянке кода.
• Экспорт в 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 и пропускает