vue2中wang富文本绑定值

### Vue2 中使用 wangeditor 实现双向绑定 为了在 Vue2 项目中正确使用 `wangeditor` 并实现数据的双向绑定，可以采用自定义组件的方式处理。通过监听编辑器的内容变化并手动更新父级组件的数据，以此模拟 `v-model` 的行为。 #### 创建富文本编辑器组件 首先创建一个新的 Vue 组件用于封装 `wangeditor`： ```javascript // components/MyEditor.vue <template> <div ref="editorElem"></div> </template> <script> import E from 'wangeditor'; export default { props: ['value'], data() { return { editor: null, content: this.value || '' }; }, watch: { value(newValue) { if (newValue !== this.editor.txt.html()) { this.editor.txt.html(newValue); } } }, mounted() { const editor = new E(this.$refs.editorElem); Object.assign(editor.config, { onchange: function () { this.content = editor.txt.html(); this.$emit('input', this.content); // 更新父组件中的值 }.bind(this), }); editor.create(); this.editor = editor; }, }; </script> ``` 此代码片段展示了如何初始化 `wangeditor` 和设置配置项[^1]。注意这里利用了 `this.$emit('input')` 来通知外部组件内容已更改，这正是模仿 `v-model` 行为的关键部分。 #### 使用 MyEditor 组件 接着可以在其他地方引入该组件，并像下面这样使用它： ```html <!-- parentComponent.vue --> <template> <div class="container"> <!-- ... --> <my-editor v-model="articleContent"/> <!-- ... --> </div> </template> <script> import MyEditor from './components/MyEditor.vue'; export default { name: "ParentComponent", components: { MyEditor }, data(){ return{ articleContent:'' } } } </script> ``` 上述例子说明了怎样在一个更大的应用程序上下文中应用新构建好的 `MyEditor` 组件[^2]。由于实现了类似于 `v-model` 的接口设计模式，因此可以直接将其作为标准表单控件一样对待。 #### 处理初始加载时的数据回显 如果希望在页面初次渲染的时候也能显示已有内容，则可以通过传递默认HTML字符串给子组件来达到目的: ```html <MyEditor :value="existingArticleContent" @input="(newVal)=>{ existingArticleContent=newVal }"/> ``` 这段代码确保了即使是在首次访问页面的情况下，也可以正常展示之前保存过的文章正文[^3]。