vue WangEditor 富文本编辑器 config

### Vue集成WangEditor富文本编辑器 #### 安装配置 为了在Vue项目中集成WangEditor富文本编辑器，首先需要安装`@wangeditor/editor`以及其对应的样式包。可以通过npm来完成这一步骤。 ```bash npm install @wangeditor/editor --save npm install @wangeditor/editor-for-vue --save ``` 接着，在项目的入口文件（通常是main.js），引入必要的CSS资源[^2]： ```javascript import '@wangeditor/editor/dist/css/style.css' ``` #### 使用方法 创建一个新的组件用于初始化编辑器实例，并将其挂载至页面上指定的位置。下面是一个简单的例子说明如何操作： ```html <template> <div id="editor-container"></div> </template> <script> // 导入 Editor 和 createEditor 函数 import { createEditor } from '@wangeditor/editor' export default { name: 'MyEditor', data() { return { editor: null, } }, mounted() { this.editor = createEditor({ selector: '#editor-container', // 编辑区域的选择器 config: {}, // 配置项 mode: 'default' // 模式，默认即可 }) }, beforeDestroy() { if (this.editor == null) return; this.editor.destroy(); // 组件销毁前要记得释放掉编辑器实例 } } </script> ``` 对于更复杂的场景比如自定义上传图片等功能，则可以在config参数里设置相应的回调函数处理逻辑。 #### 示例 这里给出一段完整的代码片段作为参考，展示了怎样在一个标准的Vue单文件组件内使用WangEditor编辑器，并实现了基本的文字输入功能。 ```html <!-- MyRichTextEditor.vue --> <template> <div class="richText"> <!-- 这里放置实际渲染出来的编辑框 --> <div ref="toolbar" style="border-bottom: 1px solid #ccc;"></div> <div ref="editor" style="text-align:left;min-height:300px;border:1px dashed #ccc;margin-top:-1px;padding-left:8px;"></div> </div> </template> <script> import WangEditor from '@wangeditor/editor'; import '@wangeditor/editor/dist/css/style.css'; export default { props: ['value'], watch: { value(newValue, oldValue){ const editorValue = this.editor.txt.html(); if(editorValue !== newValue && !this.isChangeByInner){ this.editor.txt.html(newValue); } } }, methods:{ changeHandler(newHtml){ this.$emit('input', newHtml); } }, mounted(){ var _self=this; // 创建工具栏和编辑区对象 let E = WangEditor; this.editor = new E(this.$refs.editor); // 设置 onchange 回调函数，将数据同步到父级组件 this.editor.config.onchange = function(html){ _self.changeHandler(html); }; // 自定义菜单配置... // 创建编辑器 this.editor.create(); // 初始化内容 setTimeout(() => { this.editor.txt.html(_self.value || ''); }, 500); }, destroyed(){ this.editor.destroy(); } }; </script> ```