Найти в Дзене

HTML Editor - небольшая программа для редактирования HTML шаблонов.

В рамках развития нашего конструктора партнерского портала PartnerOS возникли сложности, казалось бы, с простой задачей - редактированием HTML-шаблона дипломов для партнеров. Технически всё выглядело банально: есть HTML шаблон, который используется для формирования дипломов в формате PDF.
Но на практике диплом оказался не «раз и навсегда» свёрстанным документом. Тексты меняются, формулировки уточняются, логотипы обновляются, регулярно нужно менять партнерские бейджики (вот сейчас, например, надо поменять в них год на 2026) и т.д. И каждый раз это означало одно и то же: правка HTML руками. Проблема была даже не в самом HTML. Каждая правка превращалась в цепочку:
открыть шаблон → аккуратно изменить текст → не задеть шаблонные конструкции → не сломать вёрстку → загрузить шаблон → сформировать и проверить PDF.
Даже если всё проходит без ошибок, это всё равно ручная и неблагодарная работа. Перебрали стандартные варианты - все не то: где то сложно, другие сразу ломают вёрстку. Также мне с

В рамках развития нашего конструктора партнерского портала PartnerOS возникли сложности, казалось бы, с простой задачей - редактированием HTML-шаблона дипломов для партнеров. Технически всё выглядело банально: есть HTML шаблон, который используется для формирования дипломов в формате PDF.

Но на практике диплом оказался не «раз и навсегда» свёрстанным документом. Тексты меняются, формулировки уточняются, логотипы обновляются, регулярно нужно менять партнерские бейджики (вот сейчас, например, надо поменять в них год на 2026) и т.д.

И каждый раз это означало одно и то же: правка HTML руками. Проблема была даже не в самом HTML. Каждая правка превращалась в цепочку:
открыть шаблон → аккуратно изменить текст → не задеть шаблонные конструкции → не сломать вёрстку → загрузить шаблон → сформировать и проверить PDF.

Даже если всё проходит без ошибок, это всё равно ручная и неблагодарная работа. Перебрали стандартные варианты - все не то: где то сложно, другие сразу ломают вёрстку. Также мне советовали инструменты Adobe. Но здесь важно понимать специфику самого шаблона. Диплом формируется не как статическая картинка, а как HTML с переменными полями. Например, в нем есть переменная "партнерский статус" - и в зависимости от него при генерации PDF подставляется соответствующая плашка — платиновая, золотая, серебряная или бронзовая. В таком сценарии никакого полноценного WYSIWYG просто не существует: визуальный редактор не знает, какая ветка шаблона отработает в реальности.

То есть проблема была не в отсутствии «красивого редактора», а в том, что шаблон - динамический по своей природе.

В какой-то момент стало понятно, что нам нужен не «редактор HTML», а инструмент, который позволяет редактировать нужные нам элементы внутри шаблона.

Так и появился небольшой локальный инструмент — html_editor.py. Идея простая: править HTML, но точечно - только текстовые поля и вшитые рисунки.

В интерфейсе слева — список всех текстов диплома. Без тегов, без переменных, без HTML. Выбираешь строку, меняешь текст, сохраняешь — готово.

Интерфейс редактирования текстов HTML-шаблона
Интерфейс редактирования текстов HTML-шаблона

Дальше мы добавили работу с изображениями. Редактор показывает все картинки, которые вшиты в HTML-шаблон: логотипы, фоны, плашки.

Можно посмотреть превью, размер, формат и заменить PNG/JPG прямо из интерфейса.

Интерфейс для просмотра и замены картинок HTML-шаблона
Интерфейс для просмотра и замены картинок HTML-шаблона

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

-3

Внутри html_content_editor.py всё довольно просто: Python, Tkinter, BeautifulSoup. Никакого сервера, никакой базы, никаких команд в консоли для пользователя. Инструмент запускается локально и решает одну конкретную задачу — аккуратно править HTML-шаблоны дипломов.

И да - это не универсальный WYSIWYG-редактор и не попытка заменить дизайнеров. Но иногда действительно проще потратить время и сделать маленький специализированный инструмент, чем ручками копаться в HTML коде.

Если кому-то нужен код или ссылка на GitHub — пишите в комментариях, я пришлю ссылку.