文档:https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html
共同的依赖
cnpm i -S @ckeditor/ckeditor5-vue axios
自定义上传图片插件
MyUploadAdapter.js
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;
ClassicEditor
安装依赖
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>
参考文章