Vue中富文本编辑器wangeditor的v-model封装

以下代码实现只配置部分功能，更多功能扩展请查阅wangeditor官网

一、下载依赖

注意wangeditor全部是小写

npm install wangeditor --save

二、实现过程中遇到的坑

1、当一个页面中使用到多个富文本组件时，会导致组件之间的id或者ref重复，导致渲染错误。

解决方案：在组件内部使用随机字符串绑定组件的ref或者id。

---

2、在父组件中改变v-model绑定的值，富文本内容不改变。

解决方案：使用watch进行监听value变化，具体看代码实现。

---

3、每次调用editor.txt.html()方法，富文本中的光标就会出现在文末，导致在编辑富文本中间的内容时，出现鬼畜现象。

解决方案：不要在editor.customConfig.onchange()中调用editor.txt.html()方法，而使用组件内部的一个content变量进行储存。然后watch content触发input事件，改变父组件的邦定值

三、完整代码实现

四、使用

import导入组件后，和使用输入框一样使用即可：