1、安装依赖

npm install @wangeditor/editor --save
# 或者 yarn add @wangeditor/editor

npm install @wangeditor/editor-for-vue --save
# 或者 yarn add @wangeditor/editor-for-vue

2、vue代码

<template>
    <div class="about">
        <div style="border: 1px solid #ccc;">
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"
            />
            <Editor
                style="height: 500px; overflow-y: hidden;"
                v-model="html"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
            />
        </div>
        <div class="box">
            <el-button type="primary" @click="submitHtml">保存</el-button>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: { },
            editorConfig: {
                placeholder: '请输入内容...' ,
                
                // 所有的菜单配置，都要在 MENU_CONF 属性下
                MENU_CONF: {
                    uploadImage: {
                        // 文件上传服务器
                        server: 'http://localhost:9090/product/file/uploadWang',
                        // form-data fieldName ，默认值 'wangeditor-uploaded-image'
                        fieldName: 'file',
                        // 自定义增加 http  header
                        headers: {
                            token: 'aaa'
                        },
                        // 跨域是否传递 cookie ，默认为 false
                        // 设置为true，则无法跨域请求
                        //withCredentials: true,
                    }
                }
            },
            mode: 'default', // or 'simple'
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        submitHtml() {
            console.log(this.html);
        }
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
            this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        }, 1500)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
})
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
    .about {
        text-align: left;
    }
    
    .box {
        margin-top: 20px;
        text-align: center;
    }
</style>

3、后端文件上传代码

• 返回值实体类

package com.shenma2009.vo;

import lombok.Data;

import java.io.Serializable;

/**
 * @author 军哥
 * @version 1.0
 * @description: UploadImageResultWang
 * @date 2023/4/23 9:58
 */

@Data
public class UploadImageResultWang implements Serializable {
    private int errno;
    private String msg;
    private UploadData data;

    public UploadImageResultWang(int errno, String msg, String url, String alt, String href) {
        this.errno = errno;
        this.msg = msg;
        this.data = new UploadData();

        this.data.setUrl(url);
        this.data.setAlt(alt);
        this.data.setHref(href);
    }
}

@Data
class UploadData implements Serializable{
    private String url;
    private String alt;
    private String href;
}

• 上传代码controller

    @PostMapping(value = "/uploadWang")
    public UploadImageResultWang uploadWang(HttpServletRequest request, @RequestParam("file") MultipartFile file) {

        String token = request.getHeader("token");
        log.info("token="+token);

        return tbUploadFileService.uploadWang(token, file);

    }

• 上传图片service实现类

    @Override
    public UploadImageResultWang uploadWang(String token, MultipartFile file) {

        AliyunOssUtil oss = AliyunOssUtil.OSS();
        String url = oss.upload(file);

        //
        TbUploadFile tbUploadFile = new TbUploadFile();
        tbUploadFile.setFileUrl(url);
        tbUploadFile.setFileName(oss.getFileName());
        tbUploadFile.setFileSize(oss.getFileSize());

        this.save(tbUploadFile);

        UploadImageResultWang resultWang = new UploadImageResultWang(0, "上传成", url, oss.getFileName(), oss.getFileUrl());

        return resultWang;
    }

参考文档

• https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87