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

六月ゝ 毕业季﹏ 提交于 2020-03-08 10:38:28

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()
      }
    }

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!