近日在写一个小的项目时，需要用到富文本，通过VUE结合富文本进行实现，网上知名的富文本不是太多，经过多个富文本的选择对比，最后决定用wangeditor这个富文本（官网示例）。如何初始化一个富文本，

前提：需要引入wangeditor：

cnpm install wangeditor

且看：

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

效果图：

对于几种知名的富文本对比以及优缺点，可以参考：

几种知名开源富文本编辑器记录和对比

富文本封装成子组件