SpringBoot 整合Ueditor 完美避坑

SpringBoot 整合Ueditor 完美避坑

下载

先去官网下载开发包 http://ueditor.baidu.com/website/download.html#mini 选择jsp开发版

然后将压缩包里的东西复制到静态文件路径下，如图：

修改配置文件

首先是选择修改ueditor.config.js,修改serverUrl，如图：

然后编写直接的config接口：

    // config.json文件路径，yml里写的绝对路径  应为jar包运行找不到config.json位置
	@Value("${ueditor.url}")
    private String url;

	@ResponseBody
    @RequestMapping(value = "/config")
    public Object config(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("application/json");
        String action = request.getParameter("action");
        if(action.equals("uploadimage")){
            // 上传图片 map返回值一致，上传方法用自己的，
            MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
            MultipartFile multipartFile = multipartHttpServletRequest.getFile("file");
            String baseDir = Global.getProfile() + "/rich";
            String filePath = FileUploadUtils.upload(baseDir,multipartFile);
            filePath = filePath.substring(Constants.RESOURCE_PREFIX.length(), filePath.length());
            filePath = imagePath + filePath;
            String imgName = multipartFile.getOriginalFilename();
            String hz = imgName.substring(imgName.indexOf("."));
            Map<String,Object> map = new HashMap<String,Object>();
            map.put("original",multipartFile.getOriginalFilename());
            map.put("name",multipartFile.getOriginalFilename());
            map.put("url",filePath);
            map.put("size",multipartFile.getSize());
            map.put("type","."+hz);
            map.put("state","SUCCESS");
            return map;
        }else if (action.equals("uploadvideo")){
            // 上传视屏
            MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
            MultipartFile multipartFile = multipartHttpServletRequest.getFile("file");
            String baseDir = Global.getProfile() + "/video";
            String filePath = FileUploadUtils.upload(baseDir,multipartFile);
            filePath = filePath.substring(Constants.RESOURCE_PREFIX.length(), filePath.length());
            filePath = imagePath + filePath;
            String imgName = multipartFile.getOriginalFilename();
            String hz = imgName.substring(imgName.indexOf("."));
            Map<String,Object> map = new HashMap<String,Object>();
            map.put("original",multipartFile.getOriginalFilename());
            map.put("name",multipartFile.getOriginalFilename());
            map.put("url",filePath);
            map.put("size",multipartFile.getSize());
            map.put("type","."+hz);
            map.put("state","SUCCESS");
        }else if (action.equals("uploadfile")){
            //上传文件
            MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
            MultipartFile multipartFile = multipartHttpServletRequest.getFile("file");
            String baseDir = Global.getProfile() + "/video";
            String filePath = FileUploadUtils.upload(baseDir,multipartFile);
            filePath = filePath.substring(Constants.RESOURCE_PREFIX.length(), filePath.length());
            filePath = imagePath + filePath;
            String imgName = multipartFile.getOriginalFilename();
            String hz = imgName.substring(imgName.indexOf("."));
            Map<String,Object> map = new HashMap<String,Object>();
            map.put("original",multipartFile.getOriginalFilename());
            map.put("name",multipartFile.getOriginalFilename());
            map.put("url",filePath);
            map.put("size",multipartFile.getSize());
            map.put("type","."+hz);
            map.put("state","SUCCESS");
        }
        else{
            // 加载是获取config.json文件 这个必须有，其他上传文件看config.json配置和需求   
            // url conf.json的路劲
            try {
                response.setCharacterEncoding("UTF-8");
                String exec = new ActionEnter(request, url).exec();
                System.out.println(exec);
                PrintWriter writer = response.getWriter();
                writer.write(new ActionEnter(request, url).exec());
                writer.flush();
                writer.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return null;
    }

config.json配置，文件位置在jsp文件夹下

根据上传图片参数说明：

"imageActionName": "uploadimage", /* 执行上传图片的action名称 即刚才confg接口switch的名称*/
    "imageFieldName": "file", /* 提交的图片表单名称 接口参数名称，一定要和接口对应*/
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "", /* 图片访问路径前缀 这个更具你数据库存储方式，如果直接存可用地址，这里配置为空，如果存部分请根据具体情况配置前缀，因为涉及到上传后对返回地址的处理*/
    "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径，接口 request.getParameter("path");可获取该配置内容 */

配置完后就是具体html引用了

	<script src="/ueditor/ueditor.config.js"></script>
	<script src="/ueditor/ueditor.all.min.js"></script>
	<script src="/ueditor/lang/zh-cn/zh-cn.js"></script>
	<script src="/ueditor/ueditor.all.js"></script>

  <textarea id="editor" type="text/plain" style="width:100%;height:500px;"></textarea>

   <script type="text/javascript">
        var ue = UE.getEditor('editor');
       // 获取富文本html内容
       ue.getContent();
       // 编辑时回显内容
       ue.setConten();
</script>

一些避坑心得

主要是在Nginx转发时候的出现的一些坑,

① 比如的后台页面访问地址是 域名/admin 而不是单独的一个域名时，就会出配置文件/config接口找不到的问题

② 还有jar包运行是找不到config.json文件路径

解决方法：

① 将所有ueditor的静态文件放在服务器中，然后通过nginx转发， nginx配置为 域名/ueditor

② 在yml中配置config.json的绝对路径即可