ckeditor5-vue自定义图片上传函数

cnpm i -S @ckeditor/ckeditor5-vue  axios

import axios from "axios";
/**
 * 自定义上传图片插件
 */
class MyUploadAdapter {
  constructor(loader) {
    this.loader = loader;
  }
  async upload() {
    const data = new FormData();
    data.append("file", await this.loader.file);
    const res = await axios({
      url: process.env.VUE_APP_BASE_URL + `/upload`,
      method: "POST",
      data,
      withCredentials: true, // true 为不允许带 token, false 为允许
    });
    console.log(res.data);
    // 后台返回数据：
    // {"code":0,"msg":"success","data":{"url":"/upload/struts2.jpeg"}}
    // 方法返回数据格式： {default: "url"}
    return {
      default: process.env.VUE_APP_TARGET_URL + res.data.data.url,
    };
  }
}
export default MyUploadAdapter;

cnpm i -S @ckeditor/ckeditor5-build-classic

<template>
  <div id="ck-editer">
    <ckeditor :editor="editor"
      @ready="onReady"
      v-model="editorData"
      :config="editorConfig">
    </ckeditor>
  </div>
</template>
<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import CKEditor from "@ckeditor/ckeditor5-vue";
import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
import MyUploadAdapter from "./MyUploadAdapter.js";
export default {
  components: {
    ckeditor: CKEditor.component
  },
  data() {
    return {
      editor: ClassicEditor,
      editorData: "<div>Content of the editor.</div>",
      editorConfig: {
        // The configuration of the editor.
        language: "zh-cn"
        // ckfinder: {
        //   // 后端处理上传逻辑返回json数据, 包括uploaded 上传的字节数 和url两个字段
        //   uploadUrl: process.env.VUE_APP_BASE_URL + `/upload`
        // }
      }
    };
  },
  methods: {
    onReady(editor) {
      // 自定义上传图片插件
      editor.plugins.get("FileRepository").createUploadAdapter = loader => {
        return new MyUploadAdapter(loader);
      };
    }
  }
};
</script>
<style lang="scss">
/* 全局修改生效 */
#ck-editer {
  .ck.ck-editor__editable_inline {
    p {
      line-height: 1.5;
    }
    min-height: 400px;
  }
}
</style>

npm i - S @ckeditor/ckeditor5-build-decoupled-document

<template>
  <div id="ck-editer">
    <ckeditor :editor="editor"
      @ready="onReady"
      v-model="editorData"
      :config="editorConfig">
    </ckeditor>
  </div>
</template>
<script>
import CKEditor from "@ckeditor/ckeditor5-vue";
import DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document";
import "@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn";
import MyUploadAdapter from "./MyUploadAdapter.js";
export default {
  name: "",
  props: {
    // v-model
    value: {
      type: String,
      default: "",
    },
  },
  components: {
    ckeditor: CKEditor.component,
  },
  data() {
    return {
      editor: DecoupledEditor,
      editorConfig: {
        // The configuration of the editor.
        language: "zh-cn",
      },
    };
  },
  computed: {
    editorData: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  methods: {
    onReady(editor) {
      // Insert the toolbar before the editable area.
      editor.ui.getEditableElement().parentElement.insertBefore(
        editor.ui.view.toolbar.element,
        editor.ui.getEditableElement()
      );
      // 自定义上传图片插件
      editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
        return new MyUploadAdapter(loader);
      };
    },
  },
  created() {},
};
</script>
<style lang="scss">
/* 全局修改生效 */
#ck-editer {
  // 编辑器高度，边框
  .ck-content {
    min-height: 400px;
    border: 1px solid #ccc !important;
    background-color: white;
  }
}
</style>