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

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