Розробка систем керування контентом: WYSIWYG, медіатека, багатомовність
Ми інтегруємо та розробляємо CMS з нуля — під редакторські сценарії, а не під «модний стек». Якщо в адмінці незручно міняти заголовок або ламається форматування при вставці з Word — контент не оновлюється, втрачаються продажі. Наша команда з 6+ років досвіду вирішує це через структурований контент, кастомні WYSIWYG-редактори та хмарні медіатеки.
Коли headless CMS виправдана, а коли — ні
Headless CMS (Strapi, Contentful, Sanity) відокремлює управління контентом від фронтенду: API віддає контент будь-якому клієнту — сайту, мобільному додатку, digital signage. Вибір для омніканальних проєктів і коли фронтенд на React/Vue/Next.js. Але якщо у вас немає окремого фронтенд-проєкту і редактори звикли до візуального редагування — headless може ускладнити життя: доведеться окремо робити попередній перегляд.
Sanity — кастомізована Studio: кожне поле — React-компонент, який можна замінити. Portable Text (формат для rich content) портується в будь-який рендерер. Для складних редакторських workflow — найкращий вибір. Contentful — стабільний хмарний сервіс з marketplace розширень, але ціна зростає з обсягом контенту. Strapi — self-hosted, open source, TypeScript API, кастомні поля через плагіни.
Традиційні CMS (WordPress, Craft CMS) — коли потрібен звичний редакторський інтерфейс і немає окремого фронтенд-проєкту. Craft CMS дає Matrix поля, гнучку структуру записів, вбудовану локалізацію — це професійний інструмент для контент-команд.
Як ми будуємо WYSIWYG-редактор, який не ламає верстку
Редактор — окрема інженерна задача, не просто <textarea>. Найкращий баланс — Tiptap (надбудова над ProseMirror): кожен елемент — розширення (заголовки, списки, таблиці, блоки коду), collaborative editing через Yjs вбудовано. Lexical (від Meta) — продуктивніший, але складніший у налаштуванні. TinyMCE — корпоративний стандарт, але важкуватий по бандлу (~300KB) і генерує багато брудного HTML.
Головна проблема — вставка з Word. , inline-стилі, вкладені <span> — без sanitize на вставку верстка ламається, SEO страждає. Ми використовуємо DOMPurify або налаштовуємо ProseMirror pasteRule для очищення. Результат — чистий HTML, який не змінюється при редизайні.
Медіатека: від завантаження до CDN
Завантажувати файли через <input type="file"> на диск сервера — антипатерн. Диск переповниться, масштабування неможливо, CDN не підключити. Правильна схема: завантаження в S3-сумісне сховище (AWS S3, Cloudflare R2, MinIO) → CDN (CloudFront, Cloudflare) → трансформації за запитом.
Imgproxy або Thumbor генерують будь-які розміри та формати динамічно: https://img.example.com/resize:800:600/format:webp/plain/s3://bucket/photo.jpg. Оригінал зберігається один раз, похідні не займають місце. Cloudflare Images — managed-сервіс.
Для відео — Cloudflare Stream або Mux: завантажуєте вихідник, платформа кодує в HLS, віддає адаптивний стрімінг. Без цього відео важить 500MB і завантажується цілком.
Що входить в розробку медіатеки
| Компонент | Технологія | Термін (тижні) |
|---|---|---|
| Завантаження та зберігання в S3 | AWS SDK / MinIO | 1–2 |
| Трансформації зображень | Imgproxy / Thumbor | 1–2 |
| Відеостенд | Cloudflare Stream / Mux | 1–2 |
| Інтерфейс завантаження та сортування | React + @dnd-kit/sortable | 1–3 |
| Міграція існуючих файлів | Кастомний скрипт | 0.5–1 |
Структурований контент vs free-form HTML
Free-form WYSIWYG через рік дає хаос: 7 розмірів шрифту, 12 кольорів, випадкові відступи. Редизайн без ручного чищення неможливий. Структурований контент — замість «як воно виглядає» зберігаємо «що це є». Не <p style="font-size:24px; color:red">Важно!</p>, а тип блоку callout з параметром variant: warning. CMS зберігає структуру, фронтенд вирішує, як рендерити. Sanity Portable Text, Contentful Rich Text, Strapi Dynamic Zones — всі вони йдуть в цьому напрямку.
Чи варто впроваджувати структурований контент?
Процес роботи
- Аналіз редакторських сценаріїв — хто редагує, як часто, який контент, чи потрібна локалізація.
- Вибір CMS під сценарії, а не по трендах.
- Проектування контент-моделі — типи записів, поля, зв'язки.
- Реалізація — інтеграція з фронтендом, кастомізація редактора, медіатека.
- Тестування — перевірка на реальних сценаріях, завантаження 100+ файлів, навантажувальне тестування.
- Деплой та документація — інструкція для редакторів, опис API, доступи.
Строки та бюджет
| Тип роботи | Термін |
|---|---|
| Інтеграція headless CMS (Strapi/Sanity) в існуючий Next.js проект | 2–5 тижнів |
| Кастомний WYSIWYG-редактор з Tiptap та специфічними блоками | 2–4 тижні |
| Медіатека з S3 + трансформації | 1–3 тижні |
| Повна CMS-система з нуля | 4–10 тижнів |
Бюджет розраховується індивідуально після аудиту. Зв'яжіться з нами — оцінимо ваш проєкт за один день.
Що ви отримаєте після завершення
- Робоча CMS з налаштованими правами доступу
- Документація по контент-моделі та API
- Інструкція для редакторів (текст + відео)
- Код, покритий тестами (PHPUnit для Laravel, Jest для JS)
- Підтримка 1 місяць після деплою
Наш досвід
6 років на ринку, 40+ виконаних проєктів. Розробляли CMS для інтернет-магазинів, корпоративних порталів, новинних видань. Використовуємо ліцензійне ПЗ (sentry.io, sonarcloud) — гарантуємо якість коду.
Джерело: внутрішня статистика проєктів за 2018–2024 рр.
Детальніше про WYSIWYG-редактори читайте на Wikipedia.
Залишилися питання?
Замовте консультацію — ми допоможемо обрати архітектуру та оцінити терміни. Отримайте пропозицію протягом 2 робочих днів.