CKEditor ImageUploader

Есть крутой редактор CKEditor5, в котором все отлично, кроме того, что не очень внятно (или я не нашел) описана реализация загрузки изображений своими силами (там есть своя реализация, но 1. она платная, 2. загружается на всякие хостинги изображений), то есть на свой сайт.

Для того, чтобы CKE загружал свои изображения, нужно создать свой JS класс, подключить его и вызвать в конструкторе редактора

class UploadAdapter {
    constructor(loader) {
        this.loader = loader;
    }
    upload() {
        return new Promise((resolve, reject) => {
            const data = new FormData();
            data.append('upload', this.loader.file);
            data.append('allowSize', 10);//允许图片上传的大小/兆
            $.ajax({
                url: '/upload',
                type: 'POST',
                data: data,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (data) {
                    // console.log(data);
                    if (data.res) {
                        resolve({
                            default: data.url
                        });
                    } else {
                        reject(data.msg);
                    }

                }
            });

        });
    }
    abort() {
    }
}

Осталось реализовать метод, принимающий файл и сохраняющий его куда-нибудь. В классе при отправке ajax можно использовать свои данные (upload, allowSize и т.п.) именно они попадут в $_POST , $_FILES  и соответственно объект, который вернется от этого метода в формате json и будет распарсен в функции в success. Обязательно вернуть результат в формате true, false (например res) и ссылку на файл (например url) — будет вставлен в редактор в виде изображения, в случае ошибки вернуть сообщение об ошибке (например msg).

Подключаем класс (можно просто добавить в head <script src=»class.js»></script>  с ссылкой на этот класс, желательно после подключения скрипта самого редактора) и создаем редактор.

var myEditor;
    DecoupledEditor
        .create( document.querySelector( '#subchapter_editor' ), {
            language: 'ru',
            ckfinder: {
                uploadUrl: '/upload'
            }            
        })
        .then( editor => {
            const toolbarContainer = document.querySelector( '#toolbar-container' );
            myEditor = editor;

            toolbarContainer.appendChild( editor.ui.view.toolbar.element );
            editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{
            return new UploadAdapter(loader);
        };
        } )
        .catch( error => {
            console.error( error );
        } );

Чтобы был русский (или любой другой) язык, нужно подключить скрипт с языками и в конфиге при создании редактора установить параметр language: ‘ru’

Источник

Leave a comment

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.