vue集成wangeditor富文本编辑器

Vue集成WangEditor富文本编辑器
安装配置
为了在Vue项目中集成WangEditor富文本编辑器，首先需要安装@wangeditor/editor以及其对应的样式包。可以通过npm来完成这一步骤。
npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save
登录后复制
接着，在项目的入口文件（通常是main.js），引入必要的CSS资源[^2]：
import '@wangeditor/editor/dist/css/style.css'
登录后复制
使用方法
创建一个新的组件用于初始化编辑器实例，并将其挂载至页面上指定的位置。下面是一个简单的例子说明如何操作：
<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编辑器，并实现了基本的文字输入功能。
<!-- 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 &amp;&amp; !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>
登录后复制