Інтеграція редактора TinyMCE в CMS сайту
TinyMCE — це зрілий WYSIWYG-редактор з багатою екосистемою плагінів. Підходить для нетехнічних користувачів, які потребують форматування вмісту без знання HTML. Доступні хмарна версія (ключ 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: 'uk',
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 робочих дні з завантаженням медіа та серверною санітизацією.