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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章