一、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; }