【VUE常用插件】用wangeditor实现富文本编辑器

一、安装wangeditor

cnpm i wangeditor --save

二、引入wangeditor 在对应页面中

import E from 'wangeditor'

三、定义节点按钮和初始化方法

<template>
  <div>
    <div id="editor"></div>
    <button @click="getHtml">获取html</button>
  </div>
</template>

<script>
  import E from 'wangeditor'
  export default {
    name: 'wangeditor',
    mounted() {
      this.initEditor();
    },
    methods: {
      initEditor(){
        this.editor = new E('#editor')
        this.editor.config.uploadImgShowBase64 = true // 允许base64保存图片
        this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 限制上传大小
        this.editor.create()
      },
      getHtml(){
        console.log(this.editor.txt.html())
      }
    }
  }
</script>