vue封装wangEditor

components下面创建WangEditor.vue

<template><div><toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><editorstyle="height: 500px; overflow-y: hidden"v-model="modifiedContent":defaultConfig="defaultEditorConfig":mode="mode"@onCreated="onCreated"@onChange="sendMessage"/></div>
</template><script>
import globalConfig from "@/config";
const { zixun_host } = globalConfig;
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
const defaultEditorConfig = {// JS 语法MENU_CONF: {},// 其他属性...
};
// 修改 uploadImage 菜单配置
defaultEditorConfig.MENU_CONF["uploadImage"] = {server: "上传图片地址",fieldName: "file",maxFileSize: 5 * 1024 * 1024, // 5Mtimeout: 30 * 1000, // 30秒//【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
};
export default Vue.extend({name: "WangEditor",props: {content: String,toolbarConfig: Object,},data() {return {modifiedContent: "",headers: {Authorization:"token"},editor: null,defaultEditorConfig: defaultEditorConfig,mode: "default", // or 'simple'};},components: {Editor,Toolbar,},/*** 通过监听props的变化，在watch选项中进行处理。* @author  我*/watch: {content(newVal) {this.modifiedContent = newVal;},modifiedContent(newVal) {// 在这里可以进行进一步处理//   console.log("Modified Content:", newVal);},},beforeDestroy() {const editor = this.editor;if (editor == null) return;editor.destroy(); // 组件销毁时，及时销毁编辑器},created() {},mounted() {},methods: {//编辑器创建完毕时的回调函数。onCreated(editor) {this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错console.log(this.editor);},sendMessage() {this.$emit("message-sent", this.modifiedContent);},},
});
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

main.js中注册这个全局组件
通过这种方式，可以在每个页面上使用组件，而无需在每个页面中重复导入和注册"@wangeditor/editor-for-vue"组件。记得确保已经安装好"@wangeditor/editor-for-vue"依赖。
组件之间可以通过props和事件来进行参数传递
使用 ↓

		<div style="border: 1px solid #ccc; width: 500px"><WangEditor:content="form.content":toolbarConfig="toolbarConfig"@message-sent="handleMessage"/></div>

const toolbarConfig = {};
toolbarConfig.excludeKeys = ["todo", //待办"emotion", //表情"insertLink", //超链接"insertVideo", //表情"insertImage", //网络图片"group-video", //视频"codeBlock", //代码块"divider", //分割线"fullScreen", //全屏
];

data() {return {form: formInit(),toolbarConfig: toolbarConfig,};},

	/*** 接收组件传来的值* @author  我*/handleMessage(message) {console.log("Received message:", message);this.form.content = message;},