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

1 下载

//（注意 wangeditor 全部是小写字母）
npm install wangeditor

2 项目中引用

import E from 'wangeditor'

3 在这里插入代码片

<div id="editor" class="editor"></div>
<button v-on:click="getContent">查看内容</button>

4 js 代码

export default {
      name: 'editor',
      data () {
        return {
          editorContent: ''，//定义为全局变量
          editor:''    //定义为全局变量
        }
      },
      methods: {
        getContent: function () {
        	this.editor.txt.html('')  //清空富文本框
            alert(this.editorContent)
        	this.editor.txt.html(“内容”); //富文本框设置内容
        }
      },
      mounted() {
        var editor = new E('#editorElem')
        editor.customConfig.onchange = (html) => {
          this.editorContent = html  //内容复制
        }
        editor.create()
      }
    }