Интеграция редактора TinyMCE в CMS сайта
TinyMCE — зрелый WYSIWYG-редактор с богатой экосистемой плагинов. Подходит для нетехнических пользователей, которым нужно форматировать контент без знания HTML. Существует cloud-версия (ключ API, CDN) и self-hosted.
Установка (self-hosted)
npm install tinymce
import { Editor } from '@tinymce/tinymce-react';
function ContentEditor({ value, onChange }) {
return (
<Editor
tinymceScriptSrc="/tinymce/tinymce.min.js"
value={value}
onEditorChange={(content) => onChange(content)}
init={{
height: 600,
language: 'ru',
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image',
'charmap', 'preview', 'anchor', 'searchreplace',
'visualblocks', 'code', 'fullscreen', 'insertdatetime',
'media', 'table', 'wordcount'
],
toolbar: 'undo redo | formatselect | bold italic | '
+ 'alignleft aligncenter alignright | '
+ 'bullist numlist | link image media | code fullscreen',
content_css: '/css/editor-content.css',
images_upload_handler: async (blobInfo) => {
const formData = new FormData();
formData.append('image', blobInfo.blob(), blobInfo.filename());
const response = await fetch('/api/media/upload', {
method: 'POST',
body: formData
});
const data = await response.json();
return data.url;
}
}}
/>
);
}
Загрузка изображений
TinyMCE поддерживает три подхода:
-
images_upload_handler— кастомная функция загрузки (показано выше) -
images_upload_url— URL эндпоинта, TinyMCE сам отправляет POST - Медиа-менеджер через плагин
tinydrive(платный)
Санитизация HTML на сервере
TinyMCE генерирует 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 из TinyMCE нужно стилизовать в публичной части сайта через prose-классы (Tailwind Typography):
<div
className="prose prose-lg max-w-none"
dangerouslySetInnerHTML={{ __html: sanitizedContent }}
/>
Срок интеграции: 1–2 рабочих дня с загрузкой медиа и серверной санитизацией.