第一步：下载ckeditor5编辑器
npm install --save @ckeditor/ckeditor5-vue2 @ckeditor/ckeditor5-build-classic
第二步：vue全局注册引用
import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue2';
Vue.use( CKEditor );
第三步：在页面中使用
<template>
<div>
<ckeditor
:editor="editor"
v-model="editorValue"
:config="editorConfig"
></ckeditor>
</div>
</template>
<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
const upload = require("../../../util/ckeditorUplodImg5");
export default {
data() {
return {
editorValue: "",
editor: ClassicEditor,
editorConfig: {
// /编辑器配置
language: "zh-cn", //语言
extraPlugins: [upload.MyCustomUploadAdapterPlugin], //图片上传
},
};
},
};
</script>
配置上传图片的方法：新建一个js文件ckeditorUplodImg5
import { fetchList} from "@/api/yq/yue-qi-fen-lei/yue-qi-guan-li";
class MyUploadAdapter {
constructor(loader) {
this.loader = loader;
}
// 启动上载过程
upload() {
return this.loader.file
.then(file => new Promise((resolve, reject) => {
var formdata = new FormData();
formdata.append("file", file);
fetchList(formdata).then((res) => {
if (res.data.code == 0) {
console.log(1, res);
//上传成功，从后台获取图片的url地址
resolve({
default: res.data.data.url
});
}
});
}));
}
// 中止上载过程
abort() {
if (this.xhr) {
this.xhr.abort();
}
}
}
function MyCustomUploadAdapterPlugin(editor) {
editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
// 在这里将URL配置为后端上载脚本
return new MyUploadAdapter(loader);
};
}
export {
MyUploadAdapter,
MyCustomUploadAdapterPlugin
}
————————————————
版权声明：本文为CSDN博主「吃土少女001」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40611595/article/details/118551219
