SpringMVC整合百度富文本编辑器

标签: UEditor

目录

一、前言

二、官网下载

三、整合至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);
    }
}

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

版权声明:本文为dwhdome原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dwhdome/article/details/102839239