Інтеграція редактора CKEditor в CMS сайту

Інтеграція редактора CKEditor в CMS сайту

CKEditor 5 — це сучасний модульний WYSIWYG-редактор. Відрізняється від TinyMCE чистою архітектурою плагінів, хорошою підтримкою TypeScript та активним розвитком. Доступна як хмарне SaaS-рішення та як open-source.

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

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

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())}
        />
    );
}

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

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]

CKEditor 5 з користувацькими плагінами

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);
        });
    }
}

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();

Часовий графік інтеграції: 1–2 робочих дні з користувацьким адаптером завантаження та налаштуванням toolbar.