Интеграция редактора 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: 'ru',
                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 рабочих дня с кастомным адаптером загрузки и настройкой тулбара.