CKEditor 5 при вставке изображения использует URL из метаданных вместо самого изображения.

На чтение 4 мин Опубликовано 04.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Настройка CKEditor 5 для работы с изображениями
Пример конфигурации
Объяснение:

Вопрос или проблема

Я использую CKEditor 5 с плагином простой загрузки.

(1) Если я нахожу изображение в Chrome и нажимаю “Копировать адрес изображения”, а затем вставляю его, изображение встраивается с использованием скопированного URL в качестве src. Это логично.

(2) Если я нахожу изображение в Chrome и нажимаю “Копировать изображение”, а затем вставляю его, изображение также встраивается с использованием URL, а не полного изображения, которое находится в буфере обмена. Это не имеет смысла. Вероятно, Chrome помещает URL в метаданные изображения или что-то в этом роде, и затем CKEditor предпочитает это.

(3) Если я нахожу изображение на своем компьютере и копирую его, а затем вставляю, изображение загружается с использованием плагина простой загрузки, а затем возвращаемый URL используется в качестве “src” изображения.

Как я могу предотвратить (2) и сделать так, чтобы при вставке изображения, полного изображения, а не только URL, оно всегда загружалось так же, как в (3)?

Ответ или решение

Для решения вашей проблемы с CKEditor 5 и вставкой изображений, которая ведет себя не так, как вы ожидаете, необходимо внести несколько изменений в конфигурацию редактора и работу с буфером обмена.

Настройка CKEditor 5 для работы с изображениями

Убедитесь, что у вас правильно установлен плагин, отвечающий за вставку изображений.
CKEditor 5 поддерживает работу с изображениями через плагин "ImageUpload". Этот плагин позволяет загружать изображения и получать URL с сервера.
Обработка вставки изображений из буфера обмена:
Чтобы обеспечить загрузку изображений при вставке из буфера обмена (например, при выборе "Копировать изображение"), вам нужно будет добавить специальную логику в инициализацию редактора. CKEditor по умолчанию может предпочитать URL из метаданных, и для этого нужно настроить его поведение.

Пример конфигурации

В вашем проекте нужно будет добавить обработчик для события вставки (пасты) изображений. Это можно сделать, добавив следующий код:

ClassicEditor
    .create(document.querySelector('#editor'), {
        // Ваша конфигурация редактора
        ckfinder: {
            uploadUrl: '/path/to/your/upload/handler'  // Замените на ваш URL
        },
        image: {
            toolbar: [
                'imageTextAlternative',
                'imageStyle:full',
                'imageStyle:side'
            ]
        },
        simpleUpload: {
            uploadUrl: '/upload/image',  // URL для загрузки изображений
        }
    })
    .then(editor => {
        editor.model.document.on('change:data', () => {
            console.log(editor.getData());
        });

        editor.editing.view.document.on('clipboardInput', (evt) => {
            const dataTransfer = evt.data.dataTransfer;

            if (dataTransfer && dataTransfer.files) {
                const items = dataTransfer.items;

                for (let i = 0; i < items.length; i++) {
                    const item = items[i];

                    if (item.kind === 'file' && item.type.startsWith('image/')) {
                        const file = item.getAsFile();

                        // Здесь вы должны реализовать логику загрузки изображения
                        uploadImage(file).then(url => {
                            const imageElement = editor.model.change(writer => {
                                const imageElement = writer.createElement('imageBlock', {
                                    src: url
                                });

                                editor.model.insertContent(imageElement);
                                return imageElement;
                            });
                        });

                        evt.preventDefault(); // Отменяйте стандартное поведение
                        break; // Останавливаем цикл, как только нашли изображение
                    }
                }
            }
        });
    })
    .catch(error => {
        console.error(error);
    });

// Функция для загрузки изображения на сервер
function uploadImage(file) {
    return new Promise((resolve, reject) => {
        const formData = new FormData();
        formData.append('upload', file);

        fetch('/upload/image', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => resolve(data.url)) // Предполагается, что response содержит URL изображения
        .catch(err => reject(err));
    });
}

Объяснение:

Событие clipboardInput: Мы прослушиваем ввод из буфера обмена, проверяем, если вставляемый элемент является изображением.
Загрузка изображения: Если элемент является изображением, мы инициируем его загрузку на сервер и вставляем полученный URL в редактор.
Отмена стандартного поведения: Мы отменяем стандартное поведение, чтобы предотвратить вставку URL из метаданных.

Этот подход позволит вам обеспечить, что вставленные изображения из буфера обмена всегда будут загружаться на сервер и будут отображаться в CKEditor так, как вам нужно.