EditorJS: Полное руководство по современному блочному редактору

Антон • 18.11.2024 • Фронтенд • 105 просмотров

(5.0 | 3 голоса)

EditorJS представляет собой мощный JavaScript-редактор, который изменил подход к созданию контента в веб-приложениях. В отличие от традиционных WYSIWYG-редакторов, EditorJS использует блочную структуру и предоставляет чистый JSON на выходе, что делает его идеальным выбором для современных веб-приложений.

Установка и настройка

1. Базовая установка

<!-- Основной редактор -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest/dist/editorjs.umd.min.js"></script>
<!-- Популярные плагины -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script>

2. Инициализация с расширенной конфигурацией

const editor = new EditorJS({
    holder: 'editorjs',
    placeholder: 'Начните создавать контент...',
    autofocus: true,
    tools: {
        header: {
            class: Header,
            config: {
                levels: [1, 2, 3, 4],
                defaultLevel: 2,
                placeholder: 'Введите заголовок'
            }
        },
        list: {
            class: List,
            inlineToolbar: true,
            config: {
                defaultStyle: 'unordered'
            }
        },
        image: {
            class: ImageTool,
            config: {
                endpoints: {
                    byFile: '/upload/image',
                    byUrl: '/fetchUrl'
                },
                uploader: {
                    uploadByFile(file) {
                        const formData = new FormData();
                        formData.append('image', file);
                        
                        return fetch('/upload/image', {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json());
                    }
                }
            }
        },
        quote: {
            class: Quote,
            inlineToolbar: true,
            config: {
                quotePlaceholder: 'Введите цитату',
                captionPlaceholder: 'Автор цитаты'
            }
        }
    }
});

Основные блоки и их возможности

1. Текстовые блоки

Параграф: Базовый блок для текста
Заголовок: Поддержка различных уровней (H1-H6)
Список: Маркированный и нумерованный
Цитата: С поддержкой автора и источника

2. Медиа блоки

Изображения: Загрузка, drag&drop, вставка по URL
Видео: Встраивание YouTube, Vimeo, других сервисов
Embed: Встраивание внешнего контента

3. Специальные блоки

Код: С подсветкой синтаксиса
Таблица: Редактируемые строки и столбцы
Разделитель: Визуальное разделение контента

Продвинутые возможности

1. Кастомные блоки

class CustomBlock {
    static get toolbox() {
        return {
            title: 'Мой блок',
            icon: '<svg>...</svg>'
        };
    }

    constructor({data}) {
        this.data = data;
    }

    render() {
        const container = document.createElement('div');
        // Кастомная логика рендеринга
        return container;
    }

    save(blockContent) {
        return {
            // Формат сохранения данных
        };
    }
}

2. Работа с данными

// Сохранение
editor.save().then((outputData) => {
    console.log('Данные сохранены:', outputData);
});

// Загрузка
const data = {
    blocks: [
        {
            type: "header",
            data: {
                text: "Заголовок статьи",
                level: 1
            }
        },
        {
            type: "paragraph",
            data: {
                text: "Содержание статьи..."
            }
        }
    ]
};
editor.render(data);

3. События и API

editor.on('change', () => {
    console.log('Контент изменен');
});

editor.on('ready', () => {
    console.log('Редактор готов к работе');
});

// Работа с блоками
editor.blocks.insert('paragraph', {
    text: 'Новый параграф'
});

editor.blocks.delete(1); // Удаление блока по индексу

Локализация

const editor = new EditorJS({
    i18n: {
        messages: {
            ui: {
                "blockTunes": {
                    "toggler": {
                        "Click to tune": "Настройки блока",
                    }
                },
                "toolbar": {
                    "toolbox": {
                        "Add": "Добавить блок"
                    }
                }
            },
            toolNames: {
                "Text": "Текст",
                "Heading": "Заголовок",
                "List": "Список"
            }
        }
    }
});

Безопасность и валидация

// Настройка санитайзера
const editor = new EditorJS({
    sanitizer: {
        p: true, // разрешить параграфы
        b: true, // разрешить жирный текст
        a: { // настройка ссылок
            href: true, // разрешить href атрибут
            target: '_blank' // открывать в новом окне
        }
    }
});

// Валидация данных
editor.save()
    .then((outputData) => {
        if (outputData.blocks.length === 0) {
            throw new Error('Контент не может быть пустым');
        }
        return outputData;
    })
    .catch((error) => {
        console.log('Ошибка валидации:', error);
    });

Оптимизация производительности

Ленивая загрузка плагинов:

const editor = new EditorJS({
    tools: {
        header: {
            class: Header,
            shortcut: 'CMD+SHIFT+H'
        }
    },
    onReady: () => {
        // Загрузка дополнительных плагинов по необходимости
        import('@editorjs/image').then(ImageTool => {
            editor.isReady
                .then(() => {
                    editor.tools.add('image', ImageTool);
                });
        });
    }
});

Автосохранение:

let saveTimeout;
editor.on('change', () => {
    clearTimeout(saveTimeout);
    saveTimeout = setTimeout(() => {
        editor.save().then((outputData) => {
            localStorage.setItem('editorjs-content', JSON.stringify(outputData));
        });
    }, 1000);
});

EditorJS предоставляет мощный и гибкий инструментарий для создания современных редакторов контента. Его модульная архитектура, чистый вывод данных и широкие возможности кастомизации делают его отличным выбором для различных веб-проектов.