码迷,mamicode.com
首页 > 编程语言 > 详细

SpringBoot 配置富文本编辑器 xheditor

时间:2017-03-03 10:03:04      阅读:330      评论:0      收藏:0      [点我收藏+]

标签:ram   注意   release   alt   err   lines   ref   dia   UI   

一年前写过一篇: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的下载页

下面是配置过程:

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

技术分享

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).测试

技术分享

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

8).祝大家成功!

SpringBoot 配置富文本编辑器 xheditor

标签:ram   注意   release   alt   err   lines   ref   dia   UI   

原文地址:http://blog.csdn.net/change_on/article/details/59535248

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!