vue-cli webpack 引入 wangeditor(轻量级富文本框)

1:使用npm下载:

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代码

  import E from 'wangeditor'
export default {
  name: 'Login',
  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

猜你喜欢

转载自blog.csdn.net/guohao326/article/details/81532490