SpringBoot 配置富文本编辑器 xheditor

傷城~ 2022-07-14 19:37 295阅读 0赞

一年前写过一篇：[struts2 配置 xheditor][struts2 _ xheditor] 的文章。那时候还在用ssh，现在开始用spring boot。本来想配置CSDN的markdown编辑器的，可惜在github上找不到。所以，还是用回轻巧的xheditor吧。

环境要求：Spring Boot v1.5.1.RELEASE、jdk1.7、myeclipse2015 、xheditor1.1.14

xheditoe的官网好像下不了，我把xheditor1.1.14的压缩包上传到资源那里了，[点击进入xheditor1.1.14的下载页][xheditor1.1.14]

下面是配置过程：

1).解压xheditor，在static目录下新建一个xheditor目录，将解压的文件通通放进去

![这里写图片描述][SouthEast]

2).在 templates 下新建一个html页面：blog.html  
这里要注意两点：  
<1> pageInit()里面的配置：html5Upload:false ，一定要设置为false，不然无法上传图片；  
<2> upImgUrl:”/uploadimg” 的 /uploadimg 是异步上传图片的方法（下点会讲）

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org" >
    <head>
        <meta name="keywords" content="keyword1,keyword2,keyword3"></meta>
        <meta name="description" content="this is my page"></meta>
        <meta name="content-type" content="text/html; charset=UTF-8"></meta>
        <title>博客</title>
        <link rel="stylesheet" href="xheditor/common.css" type="text/css" media="screen" />
        <script type="text/javascript" src="xheditor/jquery/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="xheditor/xheditor-1.1.14-zh-cn.min.js"></script>
        <script type="text/javascript"> $(pageInit); function pageInit() { $.extend(xheditor.settings,{shortcuts:{ 'ctrl+enter':submitForm}}); $('#elm1').xheditor({tools:'full',skin:'default',internalScript:false, html5Upload:false, upImgUrl:"/uploadimg",upImgExt:"jpg,jpeg,gif,png"}); } function submitForm(){ $('#frmDemo').submit();} </script>
    </head>
    <body>
        <textarea id="elm1" name="essaycontent" rows="40" cols="80" style="width: 80%"></textarea>
    </body>
    </html>

3).xheditor 的图片上传是异步的，即先把图片上传到服务器，服务器返回图片的路径回显。所以要专门写一个 controller 来处理图片上传，为了不和业务逻辑混淆，把这个专门处理图片上传的 controller 写在工具包中。有一点需要注意，返回给 xheditor 的message(json格式)中，有个 msg 的参数，xheditor 根据 msg 定位图片的路径，也就是说 msg 表示的是刚刚上传的图片存放的路径，文件名和路径要完整！比如：String msg = “/imgupload/” + newFileName; /imgupload/ 是存放图片的文件夹，newFileName 是UUID 改动过的文件名字。

package com.hsp.util;
    
    import java.io.File;
    import java.util.UUID;
    
    import javax.servlet.http.HttpServletRequest;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    
    
    @Controller
    public class XheditorImgUpload {
    
        @RequestMapping(value = "/uploadimg", method=RequestMethod.POST)
        public @ResponseBody String imgUpload(HttpServletRequest request, 
                @RequestParam MultipartFile filedata) {
    
            //System.out.println("filedata --> " + filedata);
            String filedataFileName = filedata.getOriginalFilename(); 
            //System.out.println("filedataFileName --> " + filedataFileName);
            String path = request.getSession().getServletContext().getRealPath("imgupload/"); 
            //UUID改文件名，避免文件名重复
            String newFileName=UUID.randomUUID().toString()+filedataFileName.substring(filedataFileName.indexOf("."),filedataFileName.length());
            String message;
            String err = "";
            String msg = "/imgupload/" + newFileName;
            //System.out.println("msg--->" + msg);
            try {
                FileUtil.uploadFile(filedata.getBytes(), path, newFileName);
            } catch (Exception e) {
                //err = e.getMessage();
            }
            message = "{\"err\":\"" + err + "\",\"msg\":\"" + msg     
                    + "\"}";
            err = message;
            return message;
        }
    
    }

4).上传文件的实现方法：FileUtil.uploadFile(…)

public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception { 
            File targetFile = new File(filePath);  
            if(!targetFile.exists()){    
                targetFile.mkdirs();    
            }       
            FileOutputStream out = new FileOutputStream(filePath+fileName);
            out.write(file);
            out.flush();
            out.close();
        }

5).设置文件上传的最大限制，在 application.properties 里面加：

spring.http.multipart.maxFileSize=100Mb
    spring.http.multipart.maxRequestSize=100Mb

6).测试

![这里写图片描述][SouthEast 1]

7).如果发生了错误，看看controller中 String msg = “/imgupload/” + newFileName; 有没有写全，有没有设置文件大小等等。

8).祝大家成功！

[struts2 _ xheditor]: http://blog.csdn.net/change_on/article/details/50582676
[xheditor1.1.14]: http://download.csdn.net/detail/change_on/9768248
[SouthEast]: /images/20220709/9f158191382a492d962a3470614eaf28.png
[SouthEast 1]: /images/20220709/fc757cfa1c6746ada77850281bc6786f.png