Интеграция редактора 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 и сломанными стилями. Если у вас есть вопросы или нужна консультация — свяжитесь с нами, оценим ваш проект бесплатно.