安裝：官方給出了如下安裝方式
點擊 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

在頁面中放入
<div id="editor"></div>然后
import WangEditor from 'wangeditor' let that = this this.editor = new WangEditor('#WangEditor') //這個地方傳入div元素的id 需要加#號// 配置 onchange 事件 this.editor.change = function () { // 這里是change 不是官方文檔中的 onchange// 編輯區(qū)域內(nèi)容變化時，實時打印出當(dāng)前內(nèi)容console.log(this.txt.html()) } this.editor.create() // 生成編輯器 this.editor.txt.html('<p>輸入內(nèi)容...</p>') //注意：這個地方是txt 不是官方文檔中的$txt

在開發(fā)中碰到過這么個問題，就是在用v-if動態(tài)顯示隱藏頁面元素時，頁面會進行重繪，目標元素div依然存在于dom樹中，但是wanEditor實例需要重新生成，且需要在this.$nextTick方法中調(diào)用
this.editor = new WangEditor('#WangEditor')方可生效

wangEditor的輸入控制欄與輸入?yún)^(qū)域默認的z-index為100001 10000，當(dāng)富文本編輯框上方有下拉菜單時，選擇框會被覆蓋。解決辦法
.w-e-menu{z-index: 2 !important; }.w-e-text-container{z-index: 1 !important;} 注：w-e-menu的z-index必須比container的大，不然選擇菜單欄選項時，會選不上

總結(jié)

以上是生活随笔為你收集整理的vue2.0中引入wangEditor2 步骤与坑的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。