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 );

第三步：在页面中使用

<template>
  <div>
      <ckeditor
      :editor="editor"
      v-model="editorValue"
      :config="editorConfig"
    ></ckeditor>
  </div>
</template>

<script>

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
const upload = require("../../../util/ckeditorUplodImg5");

export default {
  data() {
    return {
      editorValue: "",
      editor: ClassicEditor,
      editorConfig: {
        // /编辑器配置
        language: "zh-cn", //语言
        extraPlugins: [upload.MyCustomUploadAdapterPlugin], //图片上传
      },
    };
  },
};
</script>

配置上传图片的方法：新建一个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
}