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

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

 

文档：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html

共同的依赖

cnpm i -S @ckeditor/ckeditor5-vue axios
1
自定义上传图片插件

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
1
使用示例

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

参考文章

自定义图片上传
Rich text editor component for Vue.js
参数配置
Document editor
依赖

npm i - S @ckeditor/ckeditor5-build-decoupled-document
1
<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>

参考

文档: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-the-document-editor-build
CKEdior5 文档编辑器构建步骤 vue富文本编辑器
————————————————
版权声明：本文为CSDN博主「彭世瑜」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/mouday/article/details/107404734