vue2.0中引入wangEditor2 步驟與坑
- 安裝:官方給出了如下安裝方式
在vue2.0項目中直接 npm install wangeditor --save點擊 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)
- 在頁麵中放入
然後<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>') //
- 在開發中碰到過這麼個問題,就是在用v-if動態顯示隱藏頁麵元素時,頁麵會進行重繪,目標元素div依然存在於dom樹中,但是wanEditor實例需要重新生成,且需要在this.$nextTick方法中調用
方可生效this.editor = new WangEditor('#WangEditor')
最後更新:2017-11-07 11:03:46