如何在Vue-ckeditor中使用图片上传功能?

huangapple go评论83阅读模式
英文:

how to use Image upload in ckeditor using vue-ckeditor?

问题

I am using CKEditor. Image button is shown in the toolbar, but when I click and upload an image, the uploaded image is not shown in the editor.

<ckeditor :editor="editor" v-model="form.title" :config="editorConfig"></ckeditor>
如何在Vue-ckeditor中使用图片上传功能?

The image button is there in the toolbar but unable to upload an image.

You can also see the image in the link below:
https://codepen.io/ckeditor/details/EJBYop

英文:

i am using ckeditor. image button is shown in toolbar but when i click and upload image. uploaded images is not shown in the editor.

  &lt;ckeditor :editor=&quot;editor&quot; v-model=&quot;form.title&quot; :config=&quot;editorConfig&quot;&gt;&lt;/ckeditor&gt;

如何在Vue-ckeditor中使用图片上传功能?

image button there in toolbar but unable to upload image.

You can also see in below link image:
https://codepen.io/ckeditor/details/EJBYop

答案1

得分: 2

你需要添加自定义上传适配器,如果你不想从源代码中导入 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]}
英文:

you have to add custom upload adapter if you don't want to import CKEditor from source and do not want to change in webpack configuration.
i.e. if you want to use base64adapter you can do something like

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) =&gt;
        {
            const reader = new window.FileReader();

            reader.addEventListener(&#39;load&#39;, () =&gt;
            {
                resolve({&#39;default&#39;: reader.result});
            });

            reader.addEventListener(&#39;error&#39;, err =&gt;
            {
                reject(err);
            });

            reader.addEventListener(&#39;abort&#39;, () =&gt;
            {
                reject();
            });

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

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

export const uploader = function (editor)
{
    editor.plugins.get(&#39;FileRepository&#39;).createUploadAdapter = (loader) =&gt;
        new UploadAdapter(loader);
};

and in ckeditor editor config

   &#39;editorConfig&#39;: {&#39;extraPlugins&#39;: [uploader]}

huangapple
  • 本文由 发表于 2020年1月6日 15:48:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/59608419.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定