CKEditor5 图片上传前后端

一、CKEditor5 前端依赖：

"@ckeditor/ckeditor5-build-decoupled-document": "^32.0.0",
"@ckeditor/ckeditor5-vue2": "^1.0.5",

二、前端vue:

<template>
  <ckeditor :editor="editor"
            style="height: 100%;overflow: auto;border: #eee solid 2px"
            :config="config"
            v-model="content"
            @ready="onReady"/>
</template>
<script>
import CKEditorDocument from '@ckeditor/ckeditor5-build-decoupled-document';
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'
import CKEditor from '@ckeditor/ckeditor5-vue2'

export default {
  components: {ckeditor: CKEditor.component},
  props: {value: {type: String}},
  data() {
    return {
      editor: CKEditorDocument,
      content: '',
      config: {
        language: 'zh-cn',
        toolbar: {items: ["heading", "|", "fontfamily", "fontsize", "fontColor", "fontBackgroundColor", "|", "bold", "italic", "underline", "strikethrough", "|", "alignment", "|", "numberedList", "bulletedList", "|", "outdent", "indent", "|", "link", "blockquote", "insertTable", "|", "uploadImage", "undo", "redo"]},
        ckfinder: {
          uploadUrl: '/api/compilationtask/uploadImg?command=QuickUpload&type=Images&responseType=json'
          //后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
        }
      }
    }
  },
  watch: {
    value(v) {
      if (v) {
        this.content = v
      }
    },
    content(v) {
      if (v && v !== this.value) {
        this.$emit('input', v)
      }
    }
  },
  methods: {
    onReady(editor) {
      this.content = this.value
      //显示toolbar
      editor.ui.getEditableElement().parentElement.insertBefore(
          editor.ui.view.toolbar.element,
          editor.ui.getEditableElement()
      );
    }
  }
}
</script>

三、后台：

@RequestMapping("/uploadImg")
public Map uploadImg(@RequestParam(value = "upload", required = false) MultipartFile file) {
    Map<String, Object> map = new HashMap<>();
    String fileFullPath = null;
    try {
        fileFullPath = commonFileConfig.uploadFile("img", file.getInputStream(), UUIDUtils.getUUID() + file.getOriginalFilename());
    } catch (IOException e) {
        e.printStackTrace();
    }
    map.put("uploaded", true);

//  map.put("url", "http://" + localIp + ":" + port + commonFileConfig.getUploadDownLoadPath(fileFullPath));

    map.put("url", commonFileConfig.getUploadDownLoadPath(fileFullPath));
    return map;
}