Springboot集成ueditor

用户3467126

发布于 2019-07-03 18:07:13

8300

发布于 2019-07-03 18:07:13

文章被收录于专栏：爱编码爱编码

ueditor

ueditor是百度开源的富文本编辑器。使用教程可以参考官网。

https://ueditor.baidu.com/website/index.html

ueditor JPS版下载地址：

https://ueditor.baidu.com/website/download.html

Springboot创建项目

将ueditor下载的放到static目录下，里面有个index.html的demo，可参考。

ueditor.png

templates目录下的index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

    <style type="text/css">
        div{
            width:100%;
        }
    </style>
</head>
<body>
<div>
    <form action="/ueditor/uploadContent.action" method="post">
        <script type="text/plain" id="uploadEditor" name="myContent">
        </script>
        <input type="submit" name="submit" value="提交">
    </form>

</div>

<script type="text/javascript">

    //实例化编辑器
    var ue = UE.getEditor('uploadEditor',{
        enableAutoSave:false,
        autoHeightEnabled: true,
        autoFloatEnabled: true,
        scaleEnabled:true,//滚动条
        initialFrameHeight:400 //默认的编辑区域高度
    });

    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
            return 'http://localhost:8080/ueditor/imgUpdate'; //在这里返回我们实际的上传图片地址
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

</script>
</body>
</html>

js目录下的config.json 修改图片的访问地址

config.json配置

ueditor目录下的ueditor.config.js 配置读取上传图片的配置。

读取配置的地址

上传接口相关Controller代码

@Controller
@RequestMapping("/ueditor")
public class FileController {
    @RequestMapping(value = "/file")
    @ResponseBody
    public String file(HttpServletRequest request) {
        String s = "{\n" +
                "            \"imageActionName\": \"uploadimage\",\n" +
                "                \"imageFieldName\": \"file\", \n" +
                "                \"imageMaxSize\": 2048000, \n" +
                "                \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n" +
                "                \"imageCompressEnable\": true, \n" +
                "                \"imageCompressBorder\": 1600, \n" +
                "                \"imageInsertAlign\": \"none\", \n" +
                "                \"imageUrlPrefix\": \"\",\n" +
                "                \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\" }";
        return s;
    }

    @RequestMapping(value = "/imgUpdate")
    @ResponseBody
    public String imgUpdate(MultipartFile file, HttpServletRequest request) throws FileNotFoundException {
        if (file.isEmpty()) {
            return "error";
        }
        // 获取文件名
        String fileName = file.getOriginalFilename();
        // 获取文件的后缀名
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        // 这里我使用随机字符串来重新命名图片
        fileName = Calendar.getInstance().getTimeInMillis() + suffixName;

        String realPath = request.getSession().getServletContext().getRealPath("images");

        String path = "D:\\images\\" + fileName;//此处保存在本地了，你也可以保存在图片服务器，或者realPath做临时文件
        File dest = new File(path);
        // 检测是否存在目录
        if (!dest.getParentFile().exists()) {
            dest.getParentFile().mkdirs();
        }
        try {
            file.transferTo(dest);
            String config = "{\"state\": \"SUCCESS\"," +
                    "\"url\": \"" + "http://localhost:8080/ueditor/images/" + fileName + "\"," +
                    "\"title\": \"" + fileName + "\"," +
                    "\"original\": \"" + fileName + "\"}";
            return config;
        } catch (IllegalStateException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "error";
    }


    /**
     * 通过url请求返回图像的字节流
     *      
     */
    @RequestMapping("/images/{fileName}")
    public void getIcon(@PathVariable("fileName") String fileName, HttpServletRequest request, HttpServletResponse response) throws IOException {

        if (StringUtils.isEmpty(fileName)) {
            fileName = "";
        }
        String path = "D:\\images\\" + fileName;


        File file = new File(path);
        //判断文件是否存在如果不存在就返回默认图标
        if (!(file.exists() && file.canRead())) {
            file = new File(path);
        }

        FileInputStream inputStream = new FileInputStream(file);
        byte[] data = new byte[(int) file.length()];
        int length = inputStream.read(data);
        inputStream.close();
        response.setContentType("image/png");
        OutputStream stream = response.getOutputStream();
        stream.write(data);
        stream.flush();
        stream.close();
    }

    @RequestMapping(value = "/uploadContent.action")
    @ResponseBody
    public void uploadContent(HttpServletRequest request) {
        String content = request.getParameter("myContent");
        System.out.println(content);
        return;
    }
}

END

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-12-23，如有侵权请联系 cloudcommunity@tencent.com 删除

html