Інтеграція CKEditor 5 у CMS: налаштування, плагіни, адаптери

Редактор контенту в адмінці гальмує, завантаження зображень падає з 403, а кастомні плагіни не працюють з React Server Components. Знайома ситуація? CKEditor 5 — модульне рішення з відкритим кодом, що підтримує TypeScript, колаборативне редагування та експорт у PDF/Word — вирішує ці проблеми, але потребує грамотної інтеграції. Ми займаємося цим понад 5 років і реалізували понад 50 проєктів — від типових корпоративних сайтів до high-load платформ. Наші інженери сертифіковані за CKEditor і готові виконати роботу під ключ з гарантією 12 місяців.

Як кастомізувати тулбар CKEditor 5?

Конфігурація тулбару задається в об'єкті toolbar.items. CKEditor 5 пропонує широкий набір вбудованих кнопок: заголовки, списки, медіа, таблиці. Ми допомагаємо вибрати потрібний набір і локалізувати інтерфейс. Приклад мінімального налаштування для української мови:

import { CKEditor } from '@ckeditor/ckeditor5-react'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; function RichTextEditor({ value, onChange }) { return ( <CKEditor editor={ClassicEditor} data={value} config={{ language: 'uk', toolbar: { items: [ 'heading', '|', 'bold', 'italic', 'link', '|', 'bulletedList', 'numberedList', '|', 'blockQuote', 'insertTable', '|', 'uploadImage', 'mediaEmbed', '|', 'undo', 'redo', 'sourceEditing' ] }, image: { upload: { types: ['jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff'] } } }} onChange={(event, editor) => onChange(editor.getData())} /> ); } 

Чому CKEditor 5 кращий за альтернативи для вашої CMS?

CKEditor 5 виграє у TinyMCE за модульністю та продуктивністю — при однаковому наборі функцій він споживає в 2 рази менше пам'яті. Підтримка React Server Components дозволяє використовувати його в Next.js без серверного багу. Порівняння основних редакторів:

CKEditor 5 також пропонує кілька готових збірок — Classic, Inline, Balloon, Document — з різними наборами функцій. Це спрощує інтеграцію та знижує час на налаштування.

Згідно з офіційною документацією CKEditor 5, модульна архітектура дозволяє скоротити розмір бандла на 60% порівняно з монолітними редакторами.

Як встановити CKEditor 5 (модульна збірка)

Установка пакетів виконується через npm:

npm install @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic 

Компонент готовий до використання. Для роботи з серверним завантаженням файлів знадобиться кастомний адаптер.

Кастомний адаптер завантаження зображень

class UploadAdapter { constructor(private loader: FileLoader) {} async upload() { const file = await this.loader.file; const formData = new FormData(); formData.append('image', file); const response = await fetch('/api/media/upload', { method: 'POST', headers: { 'X-CSRF-TOKEN': getCsrfToken() }, body: formData }); const data = await response.json(); return { default: data.url }; } abort() {} } // Реєстрація адаптера function UploadAdapterPlugin(editor) { editor.plugins.get('FileRepository').createUploadAdapter = (loader) => new UploadAdapter(loader); } // У конфігурації extraPlugins: [UploadAdapterPlugin] 

Ми додаємо перевірку типів файлів, обмеження розміру (до 10 МБ) та генерацію мініатюр на стороні сервера. Гарантуємо безпечне завантаження з використанням CSRF-токенів.

Розробка кастомних плагінів

CKEditor 5 дозволяє створювати плагіни для блоків контенту. Приклад — плагін для вставки товару з пошуком та автозаповненням:

import { Plugin, ButtonView, Command } from 'ckeditor5'; class InsertProductCommand extends Command { execute({ productId, productName, productPrice }) { const editor = this.editor; editor.model.change(writer => { const productBlock = writer.createElement('productBlock', { productId, productName, productPrice }); editor.model.insertContent(productBlock); }); } } 

Такі плагіни інтегруються в тулбар і працюють як звичайні кнопки. На одному з проєктів ми реалізували подібне для каталогу з 10 000 товарів — час створення контенту скоротився на 40%. Економія на розробці власного редактора становить до 60% бюджету, а окупність інтеграції настає через 3–6 місяців за рахунок підвищення продуктивності редакторів. Замовте консультацію, щоб оцінити потенціал для вашого бізнесу.

Навіщо використовувати headless CKEditor (без UI)

Для сайтів на Next.js, де потрібна лише серіалізація/десеріалізація без WYSIWYG-інтерфейсу:

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic'; // Парсинг HTML → модель → назад у HTML (для конвертації контенту) const editor = await ClassicEditor.create(document.createElement('div'), { /* config */ }); editor.setData(htmlContent); const processed = editor.getData(); editor.destroy(); 

Цей підхід використовується при міграції контенту або server-side рендерингу.

Типові помилки при інтеграції

• Ігнорування CSRF-захисту при завантаженні файлів — отримуємо 403. Вирішується кастомним адаптером з токеном.
• Відсутність генерації мініатюр — важкі зображення сповільнюють завантаження сторінок. Ми додаємо автоматичне обрізання до 1200px по ширині.
• Використання глобального стилю редактора без ізоляції — конфлікти з CSS фреймворку. Ми застосовуємо shadow DOM або scoped стилі.

Що входить в роботу з інтеграції

1. Налаштування та локалізація тулбару.
2. Інтеграція завантаження зображень і файлів з кастомним адаптером.
3. Розробка кастомних плагінів (вставка товарів, відео, інтерактивних блоків).
4. Підключення колаборативного редагування (опціонально).
5. Експорт контенту в PDF/Word.
6. Адаптація під мобільні пристрої.
7. Тестування на кросбраузерність та продуктивність.
8. Документація та навчання контент-менеджерів.

Процес роботи: аналіз поточної архітектури → налаштування стеку (React/Next.js) → розробка адаптера та плагінів → модульне та інтеграційне тестування → деплой та пост-релізна підтримка.

Термін інтеграції — від 3 до 7 робочих днів залежно від складності кастомних плагінів. На всі роботи надається гарантія 12 місяців. Отримайте консультацію з інтеграції CKEditor 5 у вашу CMS — ми підберемо оптимальне рішення.