富文本编辑器 wangEditor多图上传

1 下载wangEditor

npm install wangeditor

2 在vue中使用

<template>
    <div>
        <div id="editorElem" ref="editor" style="text-align:left"></div>
        <Button shape="circle" type="primary" v-on:click="getContent">submit</Button>
    </div>
</template>
<script>
import E from 'wangeditor'
 export default {
      name: 'editor',
      data () {
        return {
            editor: '',
            editorContent: ''
        }
      },
      methods: {
        getContent: function () { 
            console.log(this.editorContent) //获取富文本内容
            this.editor.txt.clear()  //清空富文本的内容
        }
      },
     mounted() {
        // var editor = new E('#editorElem')
        this.editor = new E(this.$refs.editor)
        this.editor.customConfig.uploadImgShowBase64 = true //图片以base64形式保存
        this.editor.customConfig.onchange = (html) => {
          this.editorContent = html
        }
        this.editor.customConfig.pasteTextHandle = (content) => { //支持粘贴
            return content
        }
        this.editor.create()
      }
  }
</script>
<style scoped>
    #editorElem /deep/ .w-e-text-container{ //设置富文本高度，富文本有个默认300px的高度
        height:400px !important;
    } 
</style>

原文地址：https://blog.csdn.net/bug_easy/article/details/94596544