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

2021-08-01 14:01:51 阅读：263 来源： 互联网

标签：UEditor cos vue ueditor config 就够 js map com

前言

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

项目环境

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

下载整合

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

引用

下载的包放进pulblic目录，jsp文件下的不用的包就直接删掉，留个config.json就行，不过这个文件也用不到，有时不知道该配置哪些，就在这个文件里看看注释。
main.js

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

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

//其他省略

实现思路

在这里插入图片描述

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

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

getActionUrl

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函数。
服务端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接口中修改返回的配置项就可以了。开发中如果你遇到这类问题，希望能帮到你。

标签：UEditor,cos,vue,ueditor,config,就够,js,map,com
来源： https://blog.csdn.net/kh6417/article/details/119296951

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

前言

项目环境

下载整合

实现思路

代码示例