Интеграция редактора 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-сервис, $5 за 100k изображений с трансформациями.

Для видео — 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 рабочих дней.