«Хочу сам менять тексты на сайте, без программиста» — одна из самых частых просьб заказчика. И одна из самых частых жалоб после запуска: «Я поправил одно слово, и у меня съехал весь блок». Причина почти всегда в редакторе: либо он слишком примитивный и заставляет писать HTML руками, либо слишком «умный» и при сохранении переписывает разметку по-своему.
Недавно мы делали полноценный редактор для админки собственного сайта — с визуальным режимом для контент-менеджера и режимом кода для разработчика. Делимся тем, что получилось, и набором требований, которые теперь закладываем в клиентские проекты.
Два режима: визуальный и HTML
Человек, который правит тексты, хочет видеть страницу почти так, как она выглядит на сайте: жирный шрифт жирным, списки списками, ссылки ссылками. Это визуальный режим, он же WYSIWYG. Разработчику или опытному редактору иногда нужно залезть в разметку: добавить атрибут, поправить таблицу, вставить блок, которого нет в панели инструментов. Это режим HTML.
Хороший редактор даёт оба режима на одном поле с переключением вкладками. У нас это сделано так:
- вкладка «Визуально» — современный блочный редактор на базе Tiptap с панелью: заголовки, жирный и курсив, списки, ссылки, цитаты, фото;
- вкладка «HTML» — редактор кода CodeMirror с подсветкой синтаксиса, нумерацией строк и автоотступами;
- переключение между вкладками сохраняет содержимое — то, что набрали в одной, видно в другой.
Для контент-менеджера достаточно первой вкладки. Вторая нужна редко, но когда нужна — без неё приходится звать программиста и лезть в базу данных.
Защита вёрстки: главное требование
Визуальные редакторы работают по одному принципу: разбирают HTML в свою внутреннюю модель документа и при сохранении собирают HTML обратно. Всё, чего редактор не понимает, — нестандартные блоки, классы, вложенные контейнеры, встроенные стили — при этой пересборке может исчезнуть или измениться. Именно так «одно исправленное слово» ломает сетку: редактор выбросил обёртку с классом, на которой держалась колонка.
Мы решили эту проблему тремя правилами:
- Источник истины — исходный HTML. Визуальный редактор пишет в поле только после того, как пользователь реально что-то изменил. Если просто открыли страницу и нажали «Сохранить», разметка остаётся байт в байт той же.
- Сложная разметка открывается в режиме кода. Если в тексте есть блоки, классы, стили или таблицы, которые визуальный режим может упростить, поле сразу открывается во вкладке HTML с предупреждением. Пользователь осознанно решает, переключаться ли в визуальный режим.
- Если скрипты не загрузились — работает обычное поле. Редактор — это улучшение поверх простой текстовой области. Сбой загрузки скрипта не должен лишать возможности редактировать.
Такой подход называют «прогрессивным улучшением»: базовый функционал работает всегда, удобства добавляются сверху и ничего не ломают, если отвалились.
Фото прямо в тексте
Без вставки изображений визуальный редактор наполовину бесполезен. Типичный сценарий без неё: менеджер загружает фото через FTP или отдельную медиатеку, копирует путь, вставляет тег руками. Ошибается в пути — на сайте пустой квадрат.
В нашем редакторе кнопка «+ Фото» открывает выбор файла, отправляет его на сервер и сразу вставляет в текст. На сервере изображение автоматически:
- проверяется на то, что это действительно картинка допустимого формата и размера;
- перекодируется в WebP — он заметно легче JPEG и PNG при том же визуальном качестве;
- уменьшается до разумного максимума по ширине — фото с телефона в несколько тысяч пикселей не нужно сайту целиком;
- очищается от метаданных EXIF, включая геометки, — чтобы фотография офиса не публиковала координаты чьей-то квартиры.
Загрузка доступна только авторизованным пользователям админки. Это кажется очевидным, но в самописных системах ссылку для загрузки нередко забывают закрыть.
Редактор не должен зависеть от чужих CDN
Современные редакторы собираются из десятков модулей. Самый быстрый способ подключить их — загрузить с публичного CDN прямо в браузере. Мы так попробовали и отказались: это порядка сотни отдельных запросов при каждом открытии формы, и если хотя бы один CDN недоступен или медленно отвечает из конкретной сети, редактор не открывается.
Вместо этого мы собрали все модули в один файл и раздаём его с собственного сервера. В сжатом виде это несколько сотен килобайт, загружаются один раз и кэшируются. Админкой пользуются несколько человек, а не тысячи посетителей, — такой вес приемлем.
Отдельный урок про версии. Пакеты редактора развиваются быстро, и при сборке менеджер пакетов охотно подтягивает свежие версии расширений к более старому ядру. Результат — ошибка в браузере, которая проявляется только на определённых действиях. Лечится жёсткой фиксацией версий всех связанных пакетов. Рецепт сборки лежит в репозитории проекта рядом с кодом, чтобы через год пересобрать редактор, не вспоминая, как это делалось.
Экспертный режим: свой CSS и JS без деплоя
Иногда клиенту или его разработчику нужно больше, чем текст: подкрутить отступ, поменять цвет кнопки к акции, подключить счётчик или виджет. Ради этого не хочется выпускать новую версию сайта.
Для таких задач мы сделали раздел «Код сайта»: два поля — CSS, который подключается в заголовке всех публичных страниц, и JavaScript, который подключается перед закрытием страницы. Чтобы это не стало способом уронить сайт одной опечаткой, предусмотрены страховки:
- Откат. При каждом сохранении предыдущая версия сохраняется отдельно, и кнопка «Откатить» возвращает её одним нажатием.
- Безопасный режим. Специальный параметр в адресе открывает сайт без пользовательского кода — так видно, виноват ли он в поломке.
- Админка без пользовательского кода. Ошибка в скрипте может сломать публичные страницы, но не страницу входа и не сам редактор, где эту ошибку нужно исправить.
- Экранирование. Код не может случайно «выйти» из своего тега и повредить разметку страницы.
Откат и история изменений
Даже при всех предосторожностях люди ошибаются: удалили не тот абзац, вставили текст из Word со всем форматированием, перепутали страницы. Минимум, который должен быть в любой админке, — хранение предыдущей версии важных полей и возможность вернуть её без обращения к разработчику. В идеале — полная история с датой и автором каждого изменения.
Ещё одна полезная мелочь — очистка вставленного текста. При вставке из Word или Google Docs редактор должен убирать лишние стили и оставлять смысловую разметку: абзацы, заголовки, списки, ссылки.
Чек-лист требований к редактору
| Требование | Зачем |
|---|---|
| Визуальный режим + HTML | Для контент-менеджера и для разработчика |
| Сохранение без изменений не трогает разметку | Вёрстка не ломается «просто так» |
| Сложная разметка открывается в коде | Редактор не упрощает то, чего не понимает |
| Фото в текст одной кнопкой | Без FTP и ручных путей |
| Автоконвертация и очистка метаданных | Скорость и приватность |
| Локальная сборка, фиксированные версии | Редактор открывается всегда |
| Откат и история | Ошибку исправляет сам клиент |
| Работа без JS | Сбой скрипта не блокирует правки |
Перед сдачей мы проверяем редактор в браузере на временной копии сайта с тестовой базой: открыть, поправить, вставить фото, сохранить, переключить режимы, откатить. Боевые данные при этом не затрагиваются.
Итог
Чтобы клиент правил сайт сам и не боялся, редактору недостаточно быть красивым. Он должен уважать существующую разметку, уметь вставлять фото без лишних шагов, работать независимо от внешних сервисов и давать возможность откатить ошибку. Тогда «я сам поправлю» действительно экономит время, а не превращается в срочный звонок программисту.
Нужна админка, в которой удобно работать вашей команде? Расскажите о задаче — подберём редактор под ваш контент и настроим его так, чтобы вёрстка оставалась целой. Подробнее о разработке — в разделе услуг.
