先看看效果

1.安装wangeditor包

npm install wangeditor

2.项目中使用

// html中
<div ref="editorElem" class="editorElem"></div>

// script中
<script>
import Editor from 'wangeditor'
export derault {
    data （） {
        return {
            editor: null, // 富文本框实例
        } 
    },
    methods: {
        // 过滤复制word文档中的结果异常问题
        pasteTextHandle(content) {
            if (content == '' && !content) return ''
            var str = content;
            str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
            str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
            str = str.replace(/<!--[\s\S]*?endif]-->/ig, '')
            return str
        }
    },
    mounted () {
        this.editor = new Editor(this.$refs.editorElem)
        this.editor.customConfig.colors = [
          '#000000',
          '#eeece0',
          '#1c487f',
          '#4d80bf',
          '#c24f4a',
          '#8baa4a',
          '#7b5ba1',
          '#46acc8',
          '#f9963b',
          '#ffffff',
          'red'
        ]
        // 使用 base64 保存图片
        this.editor.customConfig.uploadImgShowBase64 = true
        // 编辑器的事件，每次改变会获取其html内容
        this.editor.customConfig.onchange = html => {
          let vdom = document.createElement('div')
          // this.pasteTextHandle处理html中的复制word的xml问题
          this.addQform.answer = this.pasteTextHandle(html)
          vdom.innerHTML = this.pasteTextHandle(html)
          vdom.remove()
        }
        this.editor.customConfig.menus = [
          // 菜单配置
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'backColor', // 背景颜色
          // 'link', // 插入链接
          // 'list', // 列表
          'justify', // 对齐方式
          // 'quote', // 引用
          // 'emoticon', // 表情
          'image' // 插入图片
          // 'table', // 表格
          // 'code', // 插入代码
          // 'undo', // 撤销
          // 'redo' // 重复
        ]
        this.editor.create() // 创建富文本实例
  },
}

</script>

通过以上方式就可以实现一个富文本的功能。