JAVA使用UEditor百度编辑器和自定义上传爬坑记

Java集成UEditor的时候真的是各种坑，之前没有用过这个编辑器，也不知道怎么配置，
一路的爬坑终于能上传图片，唉。。

上传的时候总是提示后端配置项没有正常加载等等的东西，是真的烦，按着网上的教程也没搞定，只能慢慢爬坑。开始配置：

最快的一种配置是：
首先去官网：http://ueditor.baidu.com/website/download.html
下载一个源码包、一个JSP的开发包。
我这里项目是SSM+MAVEN。
把JSP的包解压扔到项目里，确认能够读取的到，我这里跟JSP页面放在一起了。
这里写图片描述

然后解压源码包，在JSP文件夹底下有个src，熟悉不？里边是java的后台代码， copy下，扔到项目里。像这样的
这里写图片描述

然后找到ueditor下jsp里的lib，里边的jar包 Build Path 下。
然后打开config.json 配置文件

**需要改的只有 “imageUrlPrefix”、“imagePathFormat”，
imageUrlPrefix：对应你的项目名，如：http://localhost:8080/Project
imagePathFormat：不修改**

然后写个JSP页面加载编辑器！
引入JS文件、必须先加载配置文件，顺序不能反了

<script type="text/javascript" src="${ctx}/jsp/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="${ctx}/jsp/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="${ctx}/jsp/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="${ctx}/jsp/ueditor/ueditor.parse.min.js"></script>

 <div class="layui-form-item">
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
<script type="text/javascript">
    var ue = UE.getEditor('editor');  //初始化编辑器
</script>
</div>

最后效果，单图、多图上传
这里写图片描述

这里写图片描述

这是默认的配置，文件上传到项目下，就是你一重启项目就没了，哈哈哈，改吧，改成上传到指定磁盘路径。

首先写一个controller，网上有很多自定义上传路径的，很乱也没怎么懂，最后找到这个文章https://blog.csdn.net/slyn_2004/article/details/53868547 一看就懂了，非常感谢这位博主。

扫描二维码关注公众号，回复： 2902266 查看本文章

controller代码如下：
UeditorController.java

package com.ys.controller;

import java.io.File;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import com.ys.utils.ToolsUtils;

/**
 * @Title UeditorController.java
 * @description: 百度编辑器入口controller 
 * @time 创建时间：2018年4月8日 下午4:52:45
 **/
@Controller
@RequestMapping(value = "/ueditor")
public class UeditorController {

    /**
     * @Title: uploadUEditorImage 
     * @Description: 自定义编辑器上传路径
     * @param @param file
     * @param @param response
     * @param @param request
     * @param @throws Exception
     * @return void
     * @date createTime：2018年4月9日下午1:52:19
     */
    @RequestMapping(value = "/ueditorUpload")
    public void ueditorUpload(@RequestParam(value = "upfile", required = false) MultipartFile file,
            HttpServletResponse response, HttpServletRequest request) throws Exception {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        JSONObject json = new JSONObject();
        PrintWriter out = response.getWriter();
        try {
            //要上传的磁盘路径
            String rootPath = "D:/uploadFile";
            //文件名
            String fileName = file.getOriginalFilename();
            //截取文件类型
            String fileType = fileName.substring(fileName.indexOf(".") + 1);
            //创建以日期为名字的文件夹
            String dateFolder = "/" + new SimpleDateFormat("yyyyMMdd").format(new Date()) + "/";
            //拼接文件的相对路径
            String path = dateFolder + ToolsUtils.getRandomString(15) + "." + fileType;
            //创建文件夹
            new File(rootPath + dateFolder).mkdir();
            //写入文件
            file.transferTo(new File(rootPath + path));
            json.put("state", "SUCCESS");
            json.put("title", file.getName());
            json.put("url", path);// 图片访问 相对路径
            json.put("original", file.getName());
        } catch (Exception e) {
            json.put("state", "ERROR");
            throw new Exception("上传文件失败！");
        }
        out.print(json.toString());
    }

}

随机生成字符串工具类，用UUID也是可以的

/**
     * @Title: getRandomString 
     * @Description: 随机生成字符串
     * @param @param length 字符串长度
     * @return String
     * @date createTime：2018年4月9日下午1:45:52
     */
    public static String getRandomString(int length){
        //产生随机数
        Random random=new Random();
        StringBuffer sb=new StringBuffer();
        //循环length次
        for(int i=0; i<length; i++){
          //产生0-2个随机数，既与a-z，A-Z，0-9三种可能
          int number=random.nextInt(3);
          long result=0;
          switch(number){
          //如果number产生的是数字0；
          case 0:
            //产生A-Z的ASCII码
            result=Math.round(Math.random()*25+65);
            //将ASCII码转换成字符
            sb.append(String.valueOf((char)result));
            break;
            case 1:
              //产生a-z的ASCII码
            result=Math.round(Math.random()*25+97);
              sb.append(String.valueOf((char)result));
            break;
            case 2:
              //产生0-9的数字
                       sb.append(String.valueOf
                              (new Random().nextInt(10)));
            break; 
          }
        }
        return sb.toString();
      }

文件的路径别搞错了，路径要匹配config.json配置文件的“imagePathFormat”路径。

“/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}”原路径是包文件JSP下的upload/image/日期文件夹/时间+字符串

这里是上传到了D:/uploadFile/{yyyy}{mm}{dd}/{rand:15},
修改config.json文件
修改”imageUrlPrefix”为 “”,
修改“imagePathFormat”为 “{yyyy}{mm}{dd}/{rand:15}”

打开使用编辑器的jsp页面更换加载方式为

<script type="text/javascript">
    //覆盖UEditor中获取路径的方法
    var ue = UE.getEditor('editor');  
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;  
    UE.Editor.prototype.getActionUrl = function(action) {  
        if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'listimage') {  
            return 'ueditor/ueditorUpload';  
        } else {  
            return this._bkGetActionUrl.call(this, action);  
        }  
    }
</script>

这时候上传会发现
这里写图片描述

因为这里是上传到了磁盘，而不是在项目下，需要配置虚拟路径

配置tomcat，打开server.xml
在最后的 Host 标签里添加

<Context docBase="D:/uploadFile" path="" reloadable="true"/>

然后上传成功
这里写图片描述

若是还是报错提示配置项错误未加载什么的，确定导入的编辑器文件能读取，要不换个地方，要不配置不拦截静态资源。

JAVA使用UEditor百度编辑器和自定义上传 爬坑记

猜你喜欢

JAVA使用UEditor百度编辑器和自定义上传爬坑记