1. 安装

官网：https://www.wangeditor.com/

https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8

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

2. 使用

2.1. 添加Toolbar标签和Editor标签

<el-form-item label="电影详情" prop="info">
    <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="movie.info"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
        />
    </div>
</el-form-item>

2.2. import

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

2.3. 指定组件

components: {Editor,Toolbar},

2.4. data()方法

官网帮助，配置和API->菜单配置->上传图片：

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

editor: null,
//html: '<p>hello</p>',
toolbarConfig: {
    excludeKeys:[
        'group-video'
//
去掉视频上传的工具栏
    
]
},
editorConfig: {
    placeholder: '请输入内容...',
    
// 
所有的菜单配置，都要在
 MENU_CONF 
属性下
    
MENU_CONF: {
        
//
配置上传图片
        
uploadImage: {
            
//
自定义上传，比如需要上传到阿里云
OSS
，通过
customUpload
来自定义，后面
uploadImg
方法需要自己写上传
            
//customUpload: this.uploadImg
            //
服务端地址
,
必填，否则上传图片会报错。
            
server:'http://localhost:8080/manage/uploadWangEditorPic',
            
// form-data fieldName 
，默认值
 'wangeditor-uploaded-image'
            
fieldName: 'file',
            
// 
单个文件的最大体积限制，默认为
 2M
            
maxFileSize: 2 * 1024 * 1024, 
// 2M
            // 
最多可上传几个文件，默认为
 100
            
maxNumberOfFiles: 20,
            
// 
选择文件时的类型限制，默认为
 ['image/*'] 
。如不想限制，则设置为
 []
            
allowedFileTypes: ['image/*'],
            
// 
自定义上传参数，例如传递验证的
 token 
等。参数会被添加到
 formData 
中，一起上传到服务端。
            
/*meta: {
                token: 'xxx',
                otherKey: 'yyy'
            },
            // 
将
 meta 
拼接到
 url 
参数中，默认
 false
            metaWithUrl: false,
            */
            // 
自定义增加
 http  header
            
headers: {
                
//Accept: 'text/x-json',
                //otherKey: 'xxx'
                
token:window.localStorage.getItem("token")
            },
            
// 
跨域是否传递
 cookie 
，默认为
 false
            //withCredentials: true,
            // 
超时时间，默认为
 10 
秒
            
timeout: 5 * 1000, 
// 5 
秒
            
// 
上传之前触发，可以检查文件扩展名等
            
onBeforeUpload(file) {
                
// file 
选中的文件，格式如
 { key: file }
                
let key = Object.keys(file)[0];
                
/*                                {
                data: File {name: '4.jpg', lastModified: 1650271589696, lastModifiedDate: Mon Apr 18 2022 16:46:29 GMT+0800 (
中国标准时间
), webkitRelativePath: '', size: 990369, …}
                extension: "jpg"
                id: "uppy-4/jpg-1e-image/jpeg-990369-1650271589696"
                isRemote: false
                meta: {name: '4.jpg', type: 'image/jpeg'}
                name: "4.jpg"
                preview: undefined
                progress: {percentage: 0, bytesUploaded: 0, bytesTotal: 990369, uploadComplete: false, uploadStarted: null}
                remote: ""
                size: 990369
                source: ""
                type: "image/jpeg"
                }*/
                
let fileInfo = file[key];
                let ext = fileInfo.extension;
                
//let size = fileInfo.size;
                //
扩展名
                
if (!",jpg,jpeg,png,gif,webp,".includes("," + ext + ",")) {
                    that.$message.error('只能上传图片(.jpg,.jpeg,.png,.gif,.webp)!');
                    return false;
                }
                return file
                
// 
可以
 return
                // 1. return file 
或者
 new 
一个
 file 
，接下来将上传
                
// 2. return false 
，不上传这个
 file
            
},
            onFailed(file, res) {
                console.log(")))))))")
                console.log(file.name);
                console.log(res);
                console.log(`${file.name} 上传失败`, res)
            },
            
// 
上传错误，或者触发
 timeout 
超时
            
onError(file, err, res) {
                that.$message.error(`${file.name} 上传出错，上传文件大小不能超过2MB!！`)
            },
        }
    }
},

3. 后台上传方法

【特别注意】服务端 response body 格式要求如下：
上传成功的返回格式：

{
    "errno": 0, // 注意：值是数字，不能是字符串
    "data": {
        "url": "xxx", // 图片 src ，必须
        "alt": "yyy", // 图片描述文字，非必须
        "href": "zzz" // 图片的链接，非必须
    }
}

上传失败的返回格式：

    {
    "errno": 1, // 只要不等于 0 就行
    "message": "失败信息"
}

@PostMapping("/manage/uploadWangEditorPic")
public Map<String, Object> uploadWangEditorPic(MultipartFile file,HttpServletRequest request){
    Map<String,Object> map = new HashMap<>();
    if(file==null || file.isEmpty()){

        map.put("errno",1);
        map.put("message","没有选择上传文件");
        return map;
    }
    //检查大小和类型

    try {
        //物理路径
        String realPath= ResourceUtils.getURL("classpath:").getPath()+"/static/uploadImages";
        //String realPath= "d:/uploadImages";
        String ext = FilenameUtils.getExtension(file.getOriginalFilename());
        String fileName = UUID.randomUUID().toString().replaceAll("-","")+"."+ext;
        file.transferTo(new File(realPath,fileName));

        map.put("errno",0);
        Map<String,String> data = new HashMap<>();
        String requestURI = request.getRequestURI();
        String requestURL = request.getRequestURL().toString();
        System.out.println("URI:"+requestURI);
        System.out.println("URL:"+requestURL);
        String path = requestURL.substring(0,requestURL.indexOf(requestURI));
        data.put("url",path+"/static/uploadImages/"+fileName);
        //data.put("alt","图片说明");
        //data.put("href","图片链接路径");
        map.put("data",data);
        return map;
    } catch (IOException e) {

        map.put("errno",1);
        map.put("message","上传文件失败");
        return map;
    }

}