编辑器ueditor和springboot 的整合

1.先导入ueditor所有的包:在springboot static下

2.导入需要的ueditor的js


3.配置ueditor.config.js的// 服务器统一请求接口路径://, serverUrl:(这个路径是个Java类,和config.js的内容相同) 

4.js里面执行1.var ue = UE.getEditor('editor');函数

5.上传图片:

  /* Ueditor里面的上传图片  */
UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;
//action是config.json配置文件的action
   UE.Editor.prototype.getActionUrl=function(action){
       if (action == 'uploadimage'){
           return [[@{/common/upload/image}]];    /* 这里填上你自己的上传图片的action */
       }else if(action == 'uploadvideo'){
        return [[@{/common/upload/image}]]; 
       }else{
           return this._bkGetActionUrl.call(this, action);
       }
   };
        

6.上传图片的方法:

@RequestMapping(value = "/upload/image", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
    @ResponseBody
    public Map<String,Object> save(HttpServletRequest req){
        Map<String,Object> rs = new HashMap<String, Object>();
        MultipartHttpServletRequest mReq  =  null;
        MultipartFile file = null;
        String fileName = "";
        // 原始文件名   UEDITOR创建页面元素时的alt和title属性
        String originalFileName = "";
        try {
            mReq = (MultipartHttpServletRequest)req;
            // 从config.json中取得上传文件的ID
            file = mReq.getFile("upfile");
            
            if(!file.isEmpty()){  
            // 取得文件的原始文件名称
                fileName = file.getOriginalFilename();
                originalFileName = fileName;
                
                String ext = (FilenameUtils.getExtension(file.getOriginalFilename())).toLowerCase();
    String storePath = "";
                if ("jpg".equals(ext) || "png".equals(ext) || "jpeg".equals(ext) || "bmp".equals(ext)) {
                storePath = "upload/image/";
    }else{
    storePath = "upload/video/";
    }
                //将图片和视频保存在本地服务器  
                String pathRoot = req.getSession().getServletContext().getRealPath("");  
                String path = pathRoot + "/" + storePath;  
                 
                file.transferTo(new File(path+fileName));  
                String doMain = readProperties.getFileDomain();
String httpImgPath = doMain + storePath + fileName;
                
                rs.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
           rs.put("url",httpImgPath);         //能访问到你现在图片的路径
           rs.put("title", originalFileName);
           rs.put("original", originalFileName);  
            }  


        } catch (Exception e) {
        e.printStackTrace();
            rs.put("state", "文件上传失败!"); //在此处写上错误提示信息,这样当错误的时候就会显示此信息
            rs.put("url","");
            rs.put("title", "");
            rs.put("original", "");
        }
        return rs;
    }


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值