基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用，支持单个或多个图片点击、粘贴、拖拽上传，Vue3.X项目也可直接使用

一直想要一个神奇多功能的富文本编辑器，经同事介绍这个 WangEditor 富文本编辑器，发现挺好用的。

传送门：wangEditor

于是用Vue2.X语法自行封装一下，这样在复用组件时，可以少写一些代码，直接组件引用即可。另外，Vue3.X项目也可直接使用，因为Vue3.X是兼容Vue2.X语法的。

注意：如果反复创建与销毁该组件，记得用上v-if

导入依赖包，注意Vue2.X和Vue3.X项目导入的依赖包版本会有所不同

// 查看 @wangeditor/editor 版本列表
npm view @wangeditor/editor versions --json

// 导入 @wangeditor/editor 依赖包
npm i --save @wangeditor/[email protected]

// 查看 @wangeditor/editor-for-vue 版本列表
npm view @wangeditor/editor-for-vue versions --json

// 导入 @wangeditor/editor-for-vue 依赖包
npm i --save @wangeditor/[email protected]

父组件：index.vue

子组件：wangEditor.vue

服务端 IndexController.java 的上传图片方法

@Value("${system.upload-file-path}")
private String uploadFilePath;

@ResponseBody
@RequestMapping("uploadImageAction")
@CrossOrigin
public HashMap uploadImageAction(@RequestParam List files) {
    HashMap responseMap = new HashMap<>();
    String newsFilePath = uploadFilePath;
    try {
        List> newFileList = new ArrayList<>();
        for (MultipartFile file : files) {
            String uuidStr = UUID.randomUUID().toString();
            String uuid = uuidStr.substring(0, 8) + uuidStr.substring(9, 13) + uuidStr.substring(14, 18) + uuidStr.substring(19, 23) + uuidStr.substring(24);

            String OldFileName = file.getOriginalFilename();// 原文件名，如：hello.pdf
            int beginIndex = OldFileName.lastIndexOf(".");// 从后匹配"."
            String newFileName = uuid + OldFileName.substring(beginIndex);// 新文件名，如uuid.pdf
            String destFileName = newsFilePath + File.separator + newFileName;// 存储路径 + 新文件名

            // 复制文件到指定目录
            File destFile = new File(destFileName);
            destFile.getParentFile().mkdirs();
            file.transferTo(destFile);

            String url = "http://IP:Port/uploadFilePath/" + newFileName;
            HashMap map = new HashMap<>();
            map.put("url", url);
            map.put("alt", "图片描述，非必须");
            map.put("href", "图片的链接，非必须");
            newFileList.add(map);
        }
        responseMap.put("data", newFileList);
        responseMap.put("errno", 0);// 上传成功：值是数字0，不能是字符串
    } catch (FileNotFoundException e) {
        e.printStackTrace();
        responseMap.put("errno", 1);// 上传失败：值不是数字0
        responseMap.put("message", "文件无法找到");
    } catch (IOException e) {
        e.printStackTrace();
        responseMap.put("errno", 1);// 上传失败：值不是数字0
        responseMap.put("message", "文件上传失败");// 上传失败：值不是数字0
    }

    return responseMap;
}

服务端 StaticResourceConfig.java 静态资源配置类

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

@Configuration
public class StaticResourceConfig extends WebMvcConfigurationSupport {

    @Value("${system.upload-file-path}")
    private String uploadFilePath;

    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        registry.addResourceHandler("/uploadFilePath/**").addResourceLocations("file:" + uploadFilePath);
    }
}

服务端 application.yml 配置文件

server:
  port: 8091

system:
  upload-file-path: "D:/uploadFilePath/"

最终效果：