如何使用vue-ckeditor在ckeditor中使用图像上传？

Question

我正在使用ckeditor。图像按钮显示在工具栏中，但是当我单击并上传图像时。上传的图像未显示在编辑器中。

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

工具栏中的图像按钮，但无法上传图像。

您还可以在下面的链接图像中看到：https://codepen.io/ckeditor/details/EJBYop

Answer 1

如果您不想从源中导入CKEditor，并且不想更改webpack配置，则必须添加自定义上传适配器。即，如果您想使用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]}