vue项目整合UEditor看这一篇就够了

2023-12-06 11:45:28

前言

vue整合UEditor的需求，在整合过程中遇到不少问题，关于这方面在网上的资料也不少，但是没有一个能解决问题，在开发的过程中，几乎所有的问题能出现的都遇到了，比如图片上传提示没有后端服务配置，比如我加的控件就是显示不出来等， 这也是我写这篇博文的初衷，从项目环境到配置，到解决问题，先说思路，最后贴上关键代码，如果你也有这样的需求或者问题，请耐心看完，会给你更多的帮助。

项目环境

  • 前后端分离
  • 后端springboot
  • 前端vue2.x + elementui， 请求代理
  • 后端接口地址是127.0.0.1:8080，前端启动后地址是：127.0.0.1:80

下载整合

网络上有直接推荐下在官方包然后放进自己的项目，我没采用这种方式，我选择的是vue-ueditor-wrap这个包， 文档很详细，怎么引用，看它的文档就很清楚。在配置的时候我花了些时间，看下面我怎么配置的：

  • 引用
    vue项目整合UEditor看这一篇就够了
    下载的包放进pulblic目录，jsp文件下的不用的包就直接删掉，留个config.json就行，不过这个文件也用不到，有时不知道该配置哪些，就在这个文件里看看注释。

  • main.js

//其他省略
// 一个“包装”了 UEditor 的 Vue 组件
import VueUeditorWrap from 'vue-ueditor-wrap';

// 在 main.js 里将它注册为全局组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap);

//其他省略

实现思路

vue项目整合UEditor看这一篇就够了

使用vue-ueditor-wrap的思路就是，配置serverUrl路径，这个路径的接口会返回一个json对象的配置数据，内容跟config.json中的内容一样，这就是为什么在上面我说config.json没什么用的原因。搞明白了这点就好做了，在环境中还配置的官网给的这个路径， 它返回什么数据，我们还返回什么数据。
vue项目整合UEditor看这一篇就够了
就像这个数据，我们改成自己的就好了， 比如catcherActionName是图片上传接口，默认是catchimage， 改成自己的， catcherUrlPrefix是图片访问的域名，换成自己的，等等这些。

还有一点是vue-ueditor-wrap默认引用的是public/UEditoer/ueditor.all.min.js， 如果配置的时候出错了，我们想改改代码，怎么办， 可以直接把ueditor.all.js改成ueditor.all.min.js就行了，这里的代码没有格式化，断点好调式。

  • getActionUrl
    vue项目整合UEditor看这一篇就够了
    ueditor.all.js中getActionUrl函数是请求之前构造请求路径的，比如返回的配置文件中图片上传的地址是catchimage，那么最终的路径就是ueditor.szcloudplus.com/cos拼接上 /catchimage，即为：ueditor.szcloudplus.com/cos/catchimage，函数入参action就是资源路径。

代码示例

  • main.js
//其他省略
// 一个“包装”了 UEditor 的 Vue 组件
import VueUeditorWrap from 'vue-ueditor-wrap';

// 在 main.js 里将它注册为全局组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap);

//其他省略
  • index.vue
<template>
  <div class="app-container">
    <vue-ueditor-wrap
      v-model="form.logContent"
      :config="editorConfig"
      editor-id="editor-demo-01"
    ></vue-ueditor-wrap>
</template>

<script>
export default {
  name: "Data",
  data() {
    return {
      editorConfig: {},
      form: {},
      // 表单校验
      rules: {
      },
    };
  },
  created() {
    // 更多 UEditor 配置，参考 http://fex.baidu.com/ueditor/#start-config
    this.editorConfig = {
      UEDITOR_HOME_URL: "/UEditor/", // 访问 UEditor 静态资源的根路径，可参考常见问题1
      serverUrl: 'http://127.0.0.1:8080/ueditor'
    };
  },
  methods: {
    
  }
};
</script>
  • ueditor.all.min.js
    我是把ueditor.all.js全部复制到了ueditor.all.min.js中，并修改了getActionUrl函数。
    vue项目整合UEditor看这一篇就够了
  • 服务端controller

@RestController
@RequestMapping("/ueditor")
public class UeditorController {
    
    @Autowired
    CosInvoker cosInvoker;
    
    @GetMapping("/config")
    public String config() {
        String config = "{\"imageActionName\":\"catchimage\",\"imageFieldName\":\"upfile\",\"imageMaxSize\":16777216,\"imageAllowFiles\":[\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\",\".webp\",\".PNG\",\".JPG\",\".JPEG\",\".GIF\",\".BMP\",\".WEBP\"],\"imageCompressEnable\":true,\"imageCompressBorder\":1600,\"imageInsertAlign\":\"none\",\"imageUrlPrefix\":\"//wode.cos.ap-chengdu.myqcloud.com/\",\"imagePathFormat\":\"storage/image/{yyyy}{mm}{dd}/{time}\",\"scrawlActionName\":\"uploadscrawl\",\"scrawlFieldName\":\"upfile\",\"scrawlPathFormat\":\"storage/image/{yyyy}{mm}{dd}/{time}\",\"scrawlMaxSize\":16777216,\"scrawlUrlPrefix\":\"//wode.cos.ap-chengdu.myqcloud.com/\",\"scrawlInsertAlign\":\"none\",\"snapscreenActionName\":\"uploadimage\",\"snapscreenPathFormat\":\"storage/image/{yyyy}{mm}{dd}/{time}\",\"snapscreenUrlPrefix\":\"//wode.cos.ap-chengdu.myqcloud.com/\",\"snapscreenInsertAlign\":\"none\",\"catcherLocalDomain\":[\"127.0.0.1\",\"localhost\",\"img.baidu.com\"],\"catcherActionName\":\"catchimage\",\"catcherFieldName\":\"source\",\"catcherPathFormat\":\"storage/image/{yyyy}{mm}{dd}/{time}\",\"catcherUrlPrefix\":\"//wode.cos.ap-chengdu.myqcloud.com/\",\"catcherMaxSize\":16777216,\"catcherAllowFiles\":[\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\",\".PNG\",\".JPG\",\".JPEG\",\".GIF\",\".BMP\"],\"videoActionName\":\"uploadvideo\",\"videoFieldName\":\"upfile\",\"videoPathFormat\":\"storage/video/{yyyy}{mm}{dd}/{time}\",\"videoUrlPrefix\":\"//wode.cos.ap-chengdu.myqcloud.com/\",\"videoMaxSize\":16777216,\"videoAllowFiles\":[\".flv\",\".swf\",\".mkv\",\".avi\",\".rm\",\".rmvb\",\".mpeg\",\".mpg\",\".ogg\",\".ogv\",\".mov\",\".wmv\",\".mp4\",\".webm\",\".mp3\",\".wav\",\".mid\",\".FLV\",\".SWF\",\".MKV\",\".AVI\",\".RM\",\".RMVB\",\".MPEG\",\".MPG\",\".OGG\",\".OGV\",\".MOV\",\".WMV\",\".MP4\",\".WEBM\",\".MP3\",\".WAV\",\".MID\"],\"fileActionName\":\"uploadfile\",\"fileFieldName\":\"upfile\",\"filePathFormat\":\"storage/file/{yyyy}{mm}{dd}/{time}\",\"fileUrlPrefix\":\"//wode.cos.ap-chengdu.myqcloud.com/\",\"fileMaxSize\":16777216,\"fileAllowFiles\":[\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\",\".flv\",\".swf\",\".mkv\",\".avi\",\".rm\",\".rmvb\",\".mpeg\",\".mpg\",\".ogg\",\".ogv\",\".mov\",\".wmv\",\".mp4\",\".webm\",\".mp3\",\".wav\",\".mid\",\".rar\",\".zip\",\".tar\",\".gz\",\".7z\",\".bz2\",\".cab\",\".iso\",\".doc\",\".docx\",\".xls\",\".xlsx\",\".ppt\",\".pptx\",\".pdf\",\".txt\",\".md\",\".xml\",\".PNG\",\".JPG\",\".JPEG\",\".GIF\",\".BMP\",\".FLV\",\".SWF\",\".MKV\",\".AVI\",\".RM\",\".RMVB\",\".MPEG\",\".MPG\",\".OGG\",\".OGV\",\".MOV\",\".WMV\",\".MP4\",\".WEBM\",\".MP3\",\".WAV\",\".MID\",\".RAR\",\".ZIP\",\".TAR\",\".GZ\",\".7Z\",\".BZ2\",\".CAB\",\".ISO\",\".DOC\",\".DOCX\",\".XLS\",\".XLSX\",\".PPT\",\".PPTX\",\".PDF\",\".TXT\",\".MD\",\".XML\"],\"imageManagerActionName\":\"listimage\",\"imageManagerListPath\":\"storage/image/\",\"imageManagerListSize\":20,\"imageManagerUrlPrefix\":\"//wode.cos.ap-chengdu.myqcloud.com/\",\"imageManagerInsertAlign\":\"none\",\"imageManagerAllowFiles\":[\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\",\".PNG\",\".JPG\",\".JPEG\",\".GIF\",\".BMP\"],\"fileManagerActionName\":\"listfile\",\"fileManagerListPath\":\"storage/file/\",\"fileManagerUrlPrefix\":\"//wode.cos.ap-chengdu.myqcloud.com/\",\"fileManagerListSize\":20,\"fileManagerAllowFiles\":[\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\",\".flv\",\".swf\",\".mkv\",\".avi\",\".rm\",\".rmvb\",\".mpeg\",\".mpg\",\".ogg\",\".ogv\",\".mov\",\".wmv\",\".mp4\",\".webm\",\".mp3\",\".wav\",\".mid\",\".rar\",\".zip\",\".tar\",\".gz\",\".7z\",\".bz2\",\".cab\",\".iso\",\".doc\",\".docx\",\".xls\",\".xlsx\",\".ppt\",\".pptx\",\".pdf\",\".txt\",\".md\",\".xml\",\".PNG\",\".JPG\",\".JPEG\",\".GIF\",\".BMP\",\".FLV\",\".SWF\",\".MKV\",\".AVI\",\".RM\",\".RMVB\",\".MPEG\",\".MPG\",\".OGG\",\".OGV\",\".MOV\",\".WMV\",\".MP4\",\".WEBM\",\".MP3\",\".WAV\",\".MID\",\".RAR\",\".ZIP\",\".TAR\",\".GZ\",\".7Z\",\".BZ2\",\".CAB\",\".ISO\",\".DOC\",\".DOCX\",\".XLS\",\".XLSX\",\".PPT\",\".PPTX\",\".PDF\",\".TXT\",\".MD\",\".XML\"],\"serverUrl\":\"//127.0.0.1:8080/ueditor\"}";
        return config;
    }
    @PostMapping("/catchimage")
    public Map<String, String> uploadimage(@Param("upfile")MultipartFile upfile) throws IOException {
        String originalFilename = upfile.getOriginalFilename();
        String exitName = originalFilename.substring(originalFilename.lastIndexOf("."));

        StringBuilder fileName = new StringBuilder();
        String newName = IdUtil.simpleUUID();
        fileName.append(newName);
        fileName.append(exitName);
        String uploadImgStr = cosInvoker.uploadImg(fileName.toString(), upfile.getInputStream());

        Map<String, String> map = new HashMap<>();
        //是否上传成功
        map.put("state", "SUCCESS");
        //图片title
//        map.put("title", uploadImgStr);
        map.put("title", "common/imgs/123.png");
        //图片原名称，可以不写，亲测不写也没有关系
        //map.put("original", oldName);
        //图片后缀格式
        map.put("type", exitName);
        //图片请求的路径
//        map.put("url", uploadImgStr);
        map.put("url", "common/imgs/123.png");
        //图片的大小
        map.put("size", upfile.getSize() + "");
        return map;
    }
}

注意获取配置文件的接口名称固定是/config，这是插件中决定的。

由于只需要用图片上传功能，我这里就实现了图片上传，如果你需要上传文件，视频，思路和图片的上传配置是一样的，在/config接口中修改返回的配置项就可以了。开发中如果你遇到这类问题，希望能帮到你。

上一篇：2021-07-20


下一篇：TreeSet课后习题