html定义一个装编辑器的DIV

<template>
    <div id="editor"></div>
</template>
复制代码

npm安装wangEditor

npm install wangeditor --save  /*wangeditor需要小写*/
复制代码

vue页面导入wangEditor

import Editor from 'wangeditor' 
export default {
    data () {
        return {
            editor: ''
        } 
    }
}
复制代码

vue页面实例化wangEditor

methods: { 
    async initEditor () { 
        this.editor = new Editor('#editor') /* 括号里面的对应的是html里div的id */
        /* 配置菜单栏 */  
        this.editor.customConfig.menu = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'emoticon',  // 表情
            'image',  // 插入图片
            'table',  // 表格
            'code',  // 插入代码
            'undo',  // 撤销
            'redo'  // 重复
        ]    
        this.editor.customConfig.uploadImgMaxLength = 5 / 限制一次最多上传 5 张图片 */ 
        this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 /* 将图片大小限制为 3M 默认为5M / 
        /* 自定义图片上传（支持跨域和非跨域上传，简单操作）*/ 
        this.editor.customConfig.customUploadImg = async (files, insert) => { 
            /* files 是 input 中选中的文件列表 */ 
            let formData = new FormData() 
            formData.append('file', files[0]) 
            let data = await this.upload(formData) 
            /* upload方法是后台提供的上传图片的接口 */
            /* insert 是编辑器自带的 获取图片 url 后，插入到编辑器的方法 上传代码返回结果之后，将图片插入到编辑器中*/ 
            insert(data.imgUrl)
        } 
        this.editor.customConfig.onchange = (html) => {
            /* html 即变化之后的内容 */ 
        } 
        this.editor.create() /* 创建编辑器 */ 
    } 
}
复制代码

渲染富文本编辑器

mounted () {
   this.initEditor()
}
复制代码