java整合umeditor

2023年5月25日 215次阅读 来源: switch_zyp

赠人玫瑰，手有余香

umeditor是ueditor的缩减版，对于日常的富文本来说已经完全足够了

环境

  • jdk: 1.7
  • maven web 新项目
  • 框架：springMVC 4.3.10.RELEASE
  • umeditor版本：1.2.3 Jsp版本 UTF-8版

开始整合

1.解压压缩包，拷贝到webapp的自定义目录下

由于我自己的项目是把所有的静态资源（css、images、js、front）都放到了webapp/static目录下，所以，我就把umeditor的所有东西都放到了webapp/static/js/lib/umeditor下面了

2.修改umeditor/jsp/imageUp.jsp，修改如下：

    <%@ page language="java" contentType="text/html; charset=utf-8"
             pageEncoding="utf-8"%>
    <%@ page import="com.common.util.upload.Uploader" %>
            <%
    request.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("utf-8");
    request.getRequestDispatcher("/upload/ajaxUploadImgUM").forward(request, response); // 直接转发到自己的controller层

// 注释的部分，是他原来的代码，umeditor默认会把图片直接存到tomcat所在的服务器上，但这并不是我想要的
// 我采用的图片服务器是七牛，所以，他默认提供的方法对我没用，直接修改之
// 使用**转发**的形式，直接转发到我自己的controller层 
//    Uploader up = new Uploader(request);
//    up.setSavePath("upload");
//    String[] fileType = {".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp"};
//    up.setAllowFiles(fileType);
//    up.setMaxSize(2048000); //单位KB
//    up.upload();
//
//    String callback = request.getParameter("callback");
//
//    String result = "{\"name\":\""+ up.getFileName() +"\", \"originalName\": \""+ up.getOriginalName() +"\", \"size\": "+ up.getSize() +", \"state\": \""+ up.getState() +"\", \"type\": \""+ up.getType() +"\", \"url\": \""+ up.getUrl() +"\"}";
//
//    result = result.replaceAll( "\\\\", "\\\\" );
//
//    if( callback == null ){
//        response.getWriter().print( result );
//    }else{
//        response.getWriter().print("<script>"+ callback +"(" + result + ")</script>");
//    }
    %>

下面是我controller层的代码，返回的方式也是直接借鉴了imageUp.jsp~~

    /**
     * UMeditor使用七牛上传
     * @param imgFile
     * @throws IOException
     */
    @RequestMapping("/ajaxUploadImgUM")
    public void ajaxUploadImgUM(@RequestParam("upfile") MultipartFile imgFile,
                                HttpServletRequest request,
                                HttpServletResponse response) throws IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");

        // 获得后缀
        String originalFilename = imgFile.getOriginalFilename();
        String suffix = "jpg";
        try {
            suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
        } catch (Exception e) {
        }

        String imagePath = uploadFileService.upload(imgFile.getBytes(), suffix);

        Map<String, Object> returnMap = new HashMap<String, Object>();
        returnMap.put("name", imagePath);
        returnMap.put("originalName", originalFilename);
        returnMap.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
        returnMap.put("type", suffix);
        returnMap.put("url", uploadFileService.getDomain() + imagePath); // 直接返回图片全路径
        returnMap.put("size", imgFile.getSize());

        String callback = request.getParameter("callback");

        String result = JSON.toJSONString(returnMap);

        if( callback == null ){
            response.getWriter().print( result );
        }else{
            response.getWriter().print("<script>"+ callback +"(" + result + ")</script>");
        }
    }

3.修改 umeditor/umeditor.config.js文件，具体修改如下：

window.UMEDITOR_CONFIG = {

        ...
        //图片上传配置区，主要就是修改这里
        ,imageUrl:URL+"jsp/imageUp.jsp" // 图片上传提交地址
        ,imagePath:"" //上传的图片回显的路径前缀，
        // umeditor渲染图片展示是采用“前缀+相对地址”的形式
        // 我的后台返回的图片路径直接就是全路径，所以我这里直接设置成空字符串！！
        // 这里可以根据自己项目的实际情况修改。
        
        ,imageFieldName:"upfile"   
        // 图片数据的后台接收参数名，需要和后台参数名的保持一致
        // 例如：我这里是upfile，那么后台的参数就是：@RequestParam("upfile") MultipartFile imgFile或者直接 MultipartFile upfile
        ...
}

4.修改umeditor/themes/default/css/umeditor.css文件，在文件的末尾增加如下代码：

/*解决Bootstrap引起的图片无法正常缩放的问题*/
.edui-container *{-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}
.edui-container *:before,.edui-container *:after {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}

加这个两个css样式主要是为了解决项目引入Bootstrap，而导致图片无法正常缩放～
另外，如果项目引用的是umeditor.min.css，那么就在umeditor.min.css中追加上面的css样式

5.开始使用，在html的<head>中加入对应的css，以及js，例如：

<head>
... 其他html代码...
<link rel="stylesheet" type="text/css" href="${base}/static/js/lib/umeditor/themes/default/css/umeditor.css">

<!-- 引用jquery -->
<script src="${base}/static/js/lib/umeditor/third-party/jquery.min.js"></script>
<!-- 引入 etpl -->
<script type="text/javascript" src="${base}/static/js/lib/umeditor/third-party/template.min.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="${base}/static/js/lib/umeditor/umeditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="${base}/static/js/lib/umeditor/umeditor.js"></script>
<!-- 语言包文件 -->
<script type="text/javascript" src="${base}/static/js/lib/umeditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    $(function(){
        window.um = UM.getEditor('container', { // container是编辑器容器的id，要和<body></body>中定义的容器的id保持一致
            /* 传入配置参数,可配参数列表看umeditor.config.js */
            toolbar: ['undo redo | bold italic underline']
        });
    });
</script>
... 其他html代码...
</head>

在<body></body>中，加入umeditor的编辑器容器，例如：

<body>
....其他html代码...
<!-- 加载编辑器的容器，id要和js中使用的id保持一致， name是为了form表单的提交-->
<script id="container" name="content" type="text/plain" style="width:600px;height:200px;">
    这里可以写你想写的初始化内容，不写也可以
</script>
....其他html代码...
</body>

6.获取和设置编辑器的内容

/* 获取编辑器内容，这里um是上一步中定义好的window.um，名字也可以自定义，只要保持一致就行 */
var html = um.getContent();
var txt = um.um.getContentTxt();

/* 设置编辑器内容 */
um.setContent('要设置的编辑器内容.');
    原文作者：switch_zyp
    原文地址: https://www.jianshu.com/p/c321ed545afc
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞