Інтеграція редактора TinyMCE в CMS: налаштування під ключ

Вступ: типові проблеми з TinyMCE

Ми часто стикаємося з запитами на інтеграцію TinyMCE в CMS. Типова ситуація: редактори скаржаться на кривий HTML, зламані стилі або неможливість завантажити зображення. В результаті контент-менеджери витрачають час на правки, а публічна частина сайту виглядає неохайно.

Наш підхід — інтеграція TinyMCE під ключ з кастомною конфігурацією тулбару, плагінів та медіагалереї. Ми налаштовуємо редактор так, щоб він генерував чистий HTML, сумісний з Tailwind Typography, та забезпечували безпечне завантаження файлів. Досвід 5+ років і 100+ проєктів дозволяють гарантувати стабільну роботу. За цей час ми навчилися обходити типові граблі: наприклад, N+1 запит при завантаженні медіа або конфлікт стилів Tailwind з вбудованими таблицями.

Чому варто обрати self-hosted TinyMCE?

Хмарна версія TinyMCE зручна для швидкого старту, але має обмеження: ключ API, залежність від CDN, неможливість кастомізувати плагіни. Self-hosted версія дає повний контроль: ви самі вирішуєте, які плагіни підключати, як обробляти зображення та який стиль застосовувати. За нашими тестами, self-hosted TinyMCE завантажується в 2 рази швидше за хмарну за рахунок локального кешування та відсутності зовнішніх запитів.

Для проєктів з високими вимогами до безпеки та продуктивності ми рекомендуємо self-hosted інтеграцію. Вона окупається вже на етапі розробки за рахунок гнучкості.

Як інтегрувати завантаження медіа?

TinyMCE підтримує три підходи:

• images_upload_handler — кастомна функція завантаження (показано вище)
• images_upload_url — URL ендпоінта, TinyMCE сам відправляє POST
• Медіа-менеджер через плагін tinydrive (платний)

Ми використовуємо перший варіант: він дає повний контроль над обробкою файлів. В одному проєкті для великого медіа-порталу ми налаштували images_upload_handler так, що зображення автоматично стискалися, створювалися кілька розмірів і зберігалися в S3-сумісне сховище. Це дозволило скоротити час завантаження сторінок на 40% та заощадити на хостингу. Для порівняння: хмарне рішення TinyDrive обійшлося б на 30% дорожче при тому ж обсязі трафіку.

Санітизація HTML: чому це критично?

TinyMCE генерує HTML, який зберігається в БД. Якщо не санітизувати, зловмисник може впровадити шкідливий код через редактор. Ми використовуємо бібліотеку HTMLPurifier — перевірений інструмент для фільтрації HTML.

// composer require ezyang/htmlpurifier
$config = HTMLPurifier_Config::createDefault();
$config->set('HTML.Allowed', 'p,br,strong,em,a[href|title],ul,ol,li,h2,h3,h4,blockquote,img[src|alt|width|height],table,thead,tbody,tr,th,td');
$config->set('AutoFormat.AutoParagraph', false);

$purifier = new HTMLPurifier($config);
$cleanHtml = $purifier->purify($request->content);

Після санітизації ми додатково перевіряємо HTML на відповідність схемі даних (наприклад, обов'язкові атрибути у зображень). Це гарантує, що в публічній частині не буде зламаної верстки.

Стилізація контенту в публічній частині

HTML з TinyMCE потрібно стилізувати в публічній частині сайту через prose-класи (Tailwind Typography):

<div
    className="prose prose-lg max-w-none"
    dangerouslySetInnerHTML={{ __html: sanitizedContent }}
/>

Ми також підключаємо кастомні стилі для таблиць, цитат та списків, щоб контент виглядав одноманітно.

Процес інтеграції під ключ

1. Аналіз вимог: визначаємо структуру контенту, необхідні плагіни та стилі.
2. Встановлення та конфігурація: налаштовуємо тулбар, завантажувач медіа та санітизацію.
3. Інтеграція з CMS: вбудовуємо редактор в адмінку та API для збереження.
4. Тестування: перевіряємо сумісність з браузерами, швидкість завантаження та безпеку.
5. Деплой та навчання: викочуємо на продакшн, проводимо навчання редакторів.

Термін інтеграції — від 1 до 3 робочих днів залежно від складності. Входить документація з конфігурації та підтримка протягом місяця.

Що входить в роботу

Заключення

Інтеграція TinyMCE під ключ позбавляє від головного болю з кривим HTML та зламаними стилями. Якщо у вас є питання або потрібна консультація — зв'яжіться з нами, оцінимо ваш проєкт безкоштовно.

Розробка систем керування контентом: 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 і завантажується цілком.

Що входить в розробку медіатеки

Структурований контент 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 — всі вони йдуть в цьому напрямку.

Чи варто впроваджувати структурований контент?

Процес роботи

1. Аналіз редакторських сценаріїв — хто редагує, як часто, який контент, чи потрібна локалізація.
2. Вибір CMS під сценарії, а не по трендах.
3. Проектування контент-моделі — типи записів, поля, зв'язки.
4. Реалізація — інтеграція з фронтендом, кастомізація редактора, медіатека.
5. Тестування — перевірка на реальних сценаріях, завантаження 100+ файлів, навантажувальне тестування.
6. Деплой та документація — інструкція для редакторів, опис API, доступи.

Строки та бюджет

Бюджет розраховується індивідуально після аудиту. Зв'яжіться з нами — оцінимо ваш проєкт за один день.

Що ви отримаєте після завершення

• Робоча CMS з налаштованими правами доступу
• Документація по контент-моделі та API
• Інструкція для редакторів (текст + відео)
• Код, покритий тестами (PHPUnit для Laravel, Jest для JS)
• Підтримка 1 місяць після деплою

Наш досвід

6 років на ринку, 40+ виконаних проєктів. Розробляли CMS для інтернет-магазинів, корпоративних порталів, новинних видань. Використовуємо ліцензійне ПЗ (sentry.io, sonarcloud) — гарантуємо якість коду.

Джерело: внутрішня статистика проєктів за 2018–2024 рр.

Детальніше про WYSIWYG-редактори читайте на Wikipedia.

Залишилися питання?

Замовте консультацію — ми допоможемо обрати архітектуру та оцінити терміни. Отримайте пропозицію протягом 2 робочих днів.