vue2+ckeditor5实现富文本编辑器以及图片上传

第一步：下载ckeditor5编辑器

npm  install --save @ckeditor/ckeditor5-vue2 @ckeditor/ckeditor5-build-classic

第二步：vue全局注册引用

import Vue from 'vue';

import CKEditor from '@ckeditor/ckeditor5-vue2';

Vue.use( CKEditor );

第三步：在页面中使用

配置上传图片的方法：新建一个js文件ckeditorUplodImg5

import { fetchList} from "@/api/yq/yue-qi-fen-lei/yue-qi-guan-li";

class MyUploadAdapter {

    constructor(loader) {

        this.loader = loader;

    }

    // 启动上载过程

    upload() {

        return this.loader.file

            .then(file => new Promise((resolve, reject) => {

                var formdata = new FormData();

                formdata.append("file", file);

                fetchList(formdata).then((res) => {

                    if (res.data.code == 0) {

                      console.log(1, res);

                        //上传成功，从后台获取图片的url地址

                        resolve({

                            default: res.data.data.url

                        });

                    }

                });

            }));

    }

    // 中止上载过程

    abort() {

        if (this.xhr) {

            this.xhr.abort();

        }

    }

}

function MyCustomUploadAdapterPlugin(editor) {

    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {

        // 在这里将URL配置为后端上载脚本

        return new MyUploadAdapter(loader);

    };

}

export {

    MyUploadAdapter,

    MyCustomUploadAdapterPlugin

}

————————————————

版权声明：本文为CSDN博主「吃土少女001」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_40611595/article/details/118551219