Vue项目之富文本编辑器wangEditor的change

项目中用到了富文本编辑器，看到很多网友都推荐了 wangEditor，所以就拿过来用了。在使用过程中也遇到了一些小坑，今天就来分享一下，希望可以帮到也遇到一样的坑的你。（另外选择这个编辑器的原因是：之前看过作者王福朋的一些博客，github，对本人帮助挺大的，如果你还走在前端学习路上，推荐看一下他的博客）

NO.1 关于配置项

官方API 和 另外一些人写得比较详细，可以搜索一下，比较容易。

NO.2 用事件触发change，将编辑器中的内容传给父组件

项目中需求是这样：需要增加快捷回复的功能（宏），就是输入特定的开始字符（比如 ##），然后出现快捷回复列表，列表中是匹配的那些短语，当鼠标点击那些短语的时候，将整段内容输入到编辑器中。

OK，开始做。我是将编译器再次封装成一个组件，然后watch中监听内容改变，通过 $emit 实时将内容发送给父组件。结果是：编译器中有了内容，不会马上发送给父组件，需要在编辑器中再输入空格或者回车。这样肯定是有bug呀！然后就是翻api，百度，google。。。

最后，终于被我找到了一个偏方（中间一度想着不行换个编译器吧 ?），那个泪呀。

重点：就是在通过点击快捷回复列表输入内容的事件中，为编译器增加一个点击事件。

下面是图片和代码：

HTML代码：

<div id="emailDitor" ref="AEditor"></div>

 JavaScript代码：

clickInputComplete($event){
      // 处理编译器不自动触发onchange 事件的偏方
      $('#emailDitor p').click();
      // 隐藏快捷回复的框
      $('.auto-complete-email-textarea').hide();
    }

补充：我是在点击输入快捷回复时增加的点击编辑器的事件，大家视情况而定，就是在需要触发编辑器change事件的地方增加一个点击事件。

想想也是够了是不是，好狗血。如果你还有使用这个编译器的其他问题，欢迎留言。

参考 eeeeeeeason 的回答：链接如下：

https://github.com/wangfupeng1988/wangEditor/issues/1749