SpringMVC整合百度富文本编辑器

目录

一、前言

二、官网下载

三、整合至spring项目

四、自定义图片视频文件等上传

---

一、前言

运营那边需要一个强大的富文本编辑器功能，用于推送文章的编辑等等，总而言之需要可以编辑PC端展示效果，或手机端展示。最开始选择的是wangEditor编辑器，因为整合很方便，功能相对简单，做完之后，交付时运营方表示不能满足他们的需求，于是，重新选择了百度的富文本编辑器。虽然很久没人维护更新了，但毕竟瘦死的骆驼比马大，其丰富的功能刚好满足我们的需求。

 

二、官网下载

官网地址：http://ueditor.baidu.com/website/

下载最新的Jsp UTF-8版，解压后目录如下

三、整合至spring项目

第一步：

将该文件夹下所有的文件拷贝至 WebRoot(或webapp) 下，新建ueditor文件夹，存放这些文件，如下图

第二步：

将 jsp\lib 所有的jar包拷贝至lib目录下，引入项目，有重复的jar包保持版本不冲突即可，关键jar为 ueditor-1.1.2.jar ，其他为该jar包的依赖包。

第三步：

修改 ueditor.config.js 中的 serverUrl 值，该值为服务端的请求路径，如下图：

说明：目前我们服务端是没有相关接口的，需要自己开发，但已经给我们提供了相关示例，原请求路径为 jsp/controller.jsp ，我们查看jsp目录下的controller.jsp文件，其代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	import="com.baidu.ueditor.ActionEnter"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%

    request.setCharacterEncoding( "utf-8" );
	response.setHeader("Content-Type" , "text/html");
	
	String rootPath = application.getRealPath( "/" );
	
	out.write( new ActionEnter( request, rootPath ).exec() );
	
%>

第四步：

根据第三步中，百度富文本编辑器给我们提供的示例，我们编写自己的controller。新建UeditorController，按照controller.jsp中的文件编写请求方法，代码如下：

@Controller
@RequestMapping(value="/ueditor")
public class UeditorController {

    @RequestMapping(value="/config")
    public void config(HttpServletRequest request, HttpServletResponse response){
        response.setContentType("application/json");
        String rootPath = request.getSession()
                .getServletContext().getRealPath("/");
        try {
            PrintWriter writer = response.getWriter();
            String exec = new ActionEnter(request, rootPath).exec();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
}

这里的请求映射路径为 /ueditor/config，第三步中，我们配置的路径为 .. /ueditor/config.do ，因为配置的路径为相路径，所以需要用(  ..  )回退上级目录拼接为正确的请求全路径。

特别注意：富文本编辑器服务端寻找config.json配置文件，是通过请求请求路径寻找的，如，我们配置的请求路径为 /ueditor/config.do。则，加载配置文件的路径为  /ueditor/config.json  （我们的WebRoot目录下有ueditor文件夹，但是config.json文件在jsp目录里面，所以要将它复制出来）。如果配置的路径为  /test/config ，则加载配置文件的路径为 /test/config.json  意味着，WebRoot目录下，要有test文件夹并且里面有config.json，才能保证请求正常，否则会提示配置文件初始化失败。

再次提醒：请求路径 /ueditor/config.do 必须对应 WebRoot文件夹下  /ueditor/config.json文件

再次提醒：请求路径 /ueditor/config.do 必须对应 WebRoot文件夹下  /ueditor/config.json文件

再次提醒：请求路径 /ueditor/config.do 必须对应 WebRoot文件夹下  /ueditor/config.json文件、

没有复制一份到指定文件夹

第五步： 

现在基础环境已经搭建完成，我们在jsp页面中引用富文本编辑器，代码如下：

    <!-- 加载编辑器的容器 -->
    <div id="editor" name="content" style="height: 345px">
    </div>

    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
	//实例化编辑器
	//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
	var ue = UE.getEditor('editor');
	ue.ready(function() {
		//this是当前创建的编辑器实例
		this.setContent('')//这里设置回显数据
	})
    </script>

第六步：

重启项目，访问富文本编辑器页面，我们看下效果。

好的已经可以正常使用了，现在上传的各种文件，均在WebRoot  /ueditor/jsp/upload/image下。

编辑器配置参考官方文档，我这里不做过多说明，地址如下：

    http://fex.baidu.com/ueditor/#start-start

但是，这不是我要的结果，文章到这里还没完呢，下面我们说下怎么自定义上传。

四、自定义图片视频文件等上传

前提背景：

由于我们所有的文件全部是托管阿里云OSS服务的，运营端，PC端，APP端都是公用一套数据，所以上述默认的上传我们是无法使用的，需要自定义。自定义的话，很简单，参考官方文档给的请求规范，按照规范返回数据即可。

地址：http://fex.baidu.com/ueditor/#dev-request_specification

我这边按照文档重写了部分上传，这里贴代码给大家做参考：

@Controller
@RequestMapping(value="/ueditor")
public class UeditorController {

    @RequestMapping(value="/config")
    public void config(HttpServletRequest request, HttpServletResponse response,
                       @RequestParam(value = "medias",required = false) MultipartFile medias,
                       @RequestParam(value = "doodling",required = false) String doodling,
                       @RequestParam(value = "video",required = false)MultipartFile video,
                       @RequestParam(value = "annex",required = false)MultipartFile annex){
        response.setContentType("application/json");
        String rootPath = request.getSession()
                .getServletContext().getRealPath("/");
        //该参数表示请求的功能，如值为 uploadimage 表示上传图片
        String action = request.getParameter("action");
        try {
            PrintWriter writer = response.getWriter();
            if(StringUtils.isEmpty(action)){
                writer.write("{status:\"无效的Action\"}");
                writer.flush();
                writer.close();
                return;
            }
            if("uploadimage".equals(action)){
                //上传图片
                writer.write(uploadImg(medias));
                writer.flush();
                writer.close();
                return;
            }
            if("uploadscrawl".equals(action)){
                //上传涂鸦的base64图片
                writer.write(uploadBase64Img(doodling));
                writer.flush();
                writer.close();
                return;
            }
            if("uploadvideo".equals(action)){
                //上传视频
                writer.write(uploadVideo(video));
                writer.flush();
                writer.close();
                return;
            }
            if("uploadfile".equals(action)){
                //上传附件
                writer.write(uploadVideo(annex));
                writer.flush();
                writer.close();
                return;
            }
            if("catchimage".equals(action)){//批量处理网络资源图片上传转存
                String[] list = request.getParameterValues("source[]");
                //上传网络资源图片
                writer.write(uploadNetworkImage(list));
                writer.flush();
                writer.close();
                return;
            }
            String exec = new ActionEnter(request, rootPath).exec();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (Exception e) {
            e.printStackTrace();
        }

    }

    public String uploadImg(MultipartFile medias)throws Exception{
        //按照规定格式返回json数据即可
        Map<String, Object> map = new HashMap();
        map.put("size", medias.getSize());
        map.put("type", medias.getContentType());
        List<String> images = new ArrayList<>();
        String name = medias.getOriginalFilename();
        String suffix = name.substring(name.lastIndexOf("."));
        //这里我是上传到阿里云进行管理，大家吧这一步改为自己的上传逻辑即可，url图片的全路径
        String imagePath = OssUtil.uploadFileImage(medias.getInputStream(),suffix);
        String url = OssUtil.URL_PATH+imagePath;
        images.add(url);
        map.put("original",url.substring(url.lastIndexOf("/")+1));
        map.put("state", "SUCCESS");
        map.put("url", url);
        return JSON.toJSONString(map);
    }

    public String uploadBase64Img(String doodling)throws Exception{
        //将字符串转换为byte数组
        byte[] bytes = new BASE64Decoder().decodeBuffer(doodling.trim());
        //转化为输入流
        ByteArrayInputStream inputStream = new ByteArrayInputStream(bytes);
        //这里我是上传到阿里云进行管理，大家吧这一步改为自己的上传逻辑即可，url图片的全路径
        String imagePath = OssUtil.uploadFileImage(inputStream,".jpg");
        Map<String, Object> map = new HashMap();
        map.put("state", "SUCCESS");
        map.put("url", OssUtil.URL_PATH+imagePath);
        return JSON.toJSONString(map);
    }

    public String uploadVideo(MultipartFile video)throws Exception{
        String name = video.getOriginalFilename();
        String suffix = name.substring(name.lastIndexOf("."));
        //这里我是上传到阿里云进行管理，大家吧这一步改为自己的上传逻辑即可，url图片的全路径
        String imagePath = OssUtil.uploadFileImage(video.getInputStream(),suffix);
        Map<String, Object> map = new HashMap();
        map.put("state", "SUCCESS");
        map.put("url", OssUtil.URL_PATH+imagePath);
        return JSON.toJSONString(map);
    }

    public String uploadNetworkImage(String[] list){
        if(null == list || list.length == 0){
            return null;
        }
        JSONObject result = new JSONObject();
        List resultList = new ArrayList();
        for(String urlStr : list){
            HttpURLConnection connection = null;
            URL url = null;
            String suffix = null;
            try {
                url = new URL(urlStr);
                connection = (HttpURLConnection)url.openConnection();
                connection.setInstanceFollowRedirects(true);
                connection.setUseCaches(true);
                suffix = MIMEType.getSuffix(connection.getContentType());
                //这里我是上传到阿里云进行管理，大家吧这一步改为自己的上传逻辑即可，url图片的全路径
                String imagePath = OssUtil.uploadFileImage(connection.getInputStream(),suffix);
                JSONObject jsonObject = new JSONObject();
                jsonObject.put("state","SUCCESS");
                jsonObject.put("source",urlStr);
                jsonObject.put("url",OssUtil.URL_PATH+imagePath);
                resultList.add(jsonObject);
            }catch (Exception e){
                e.printStackTrace();
            }
        }
        result.put("state","SUCCESS");
        result.put("list",resultList);
        return JSON.toJSONString(result);
    }
}

如果大家在整合中出了问题请留言，我会尽量帮大家解决的