Как использовать загрузку изображений в ckeditor, используя vue -ckeditor? - PullRequest
Новая
       97

Как использовать загрузку изображений в ckeditor, используя vue -ckeditor?

0 голосов
/ 06 января 2020

Я использую ckeditor. кнопка изображения отображается на панели инструментов, но когда я нажимаю и загружаю изображение. загруженные изображения не отображаются в редакторе. 

  <ckeditor :editor="editor" v-model="form.title" :config="editorConfig"></ckeditor>

enter image description here

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

Вы также можете увидеть на изображении ссылки ниже: https://codepen.io/ckeditor/details/EJBYop

1 Ответ

1 голос
/ 23 апреля 2020

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

export default class UploadAdapter
{
    constructor (loader)
    {
        // The file loader instance to use during the upload.
        this.loader = loader;
    }

    // Starts the upload process.
    upload ()
    {
        return new Promise((resolve, reject) =>
        {
            const reader = new window.FileReader();

            reader.addEventListener('load', () =>
            {
                resolve({'default': reader.result});
            });

            reader.addEventListener('error', err =>
            {
                reject(err);
            });

            reader.addEventListener('abort', () =>
            {
                reject();
            });

            this.loader.file.then(file =>
            {
                reader.readAsDataURL(file);
            });
        });
    }

    // Aborts the upload process.
    abort ()
    {
         //
    }
}

export const uploader = function (editor)
{
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) =>
        new UploadAdapter(loader);
};

и в конфигурации редактора ckeditor 

   'editorConfig': {'extraPlugins': [uploader]}
...