1. 程式人生 > >vue-cli webpack 引入 wangeditor(輕量級富文字框)

vue-cli webpack 引入 wangeditor(輕量級富文字框)

1:使用npm下載:

//(注意 wangeditor 全部是小寫字母)
npm install wangeditor 

2: 直接在專案模板中引用

import E from 'wangeditor'

3:HTML

   <div id="editorElem" style="text-align:left"></div>
   <button v-on:click="getContent">檢視內容</button>

4:js程式碼

    export default {
      name: 'editor',
      data () {
        return
{ editorContent: '' } }, methods: { getContent: function () { alert(this.editorContent) } }, mounted() { var editor = new E('#editorElem') editor.customConfig.onchange = (html) => { this.editorContent = html } editor.create() } }

5:哈哈 然後就搞定啦 附錄 原作者github 地址

https://github.com/wangfupeng1988/wangEditor/blob/master/README.md