466      技術社區[雲棲]

vue2.0中引入wangEditor2 步驟與坑

1. 安裝：官方給出了如下安裝方式
   

   點擊 https://github.com/wangfupeng1988/wangEditor/releases 下載最新版
   使用git下載： git clone https://github.com/wangfupeng1988/wangEditor.git
   使用npm安裝: npm install wangeditor （注意 wangeditor 全部是小寫字母）
   使用bower下載：bower install wangEditor （前提保證電腦已安裝了bower）

   在vue2.0項目中直接 npm install wangeditor --save
2. 在頁麵中放入
   

   <div ></div>

   然後
   

   import WangEditor from 'wangeditor'

   let that = this
   this.editor = new WangEditor('#WangEditor')  //
           // 配置 onchange 事件
   this.editor.change = function () {          // 
       // 編輯區域內容變化時，實時打印出當前內容
     console.log(this.txt.html())
   }
   this.editor.create()     // 生成編輯器
   this.editor.txt.html('<p>輸入內容...</p>')   //

3. 在開發中碰到過這麼個問題，就是在用v-if動態顯示隱藏頁麵元素時，頁麵會進行重繪，目標元素div依然存在於dom樹中，但是wanEditor實例需要重新生成，且需要在this.$nextTick方法中調用
   

   this.editor = new WangEditor('#WangEditor')

   方可生效

最後更新：2017-11-07 11:03:46

  上一篇：  【高通傾向拒絕博通收購】博通擬以1300億美元收購高通，IT史最大收購案能否成功（專家評論）

  下一篇：  寒武紀3款AI處理器齊發，陳天石3年小目標：占領10億智能AI終端；占領中國AI雲端高性能芯片1/3