SpringMVC整合Ueditor出现的问题与解决方法

版权声明:本文为博主原创文章,未经博主允许不得转载 https://blog.csdn.net/liujun03/article/details/82225611

一、SpringMVC 整合 Ueditor

项目中需要使用到富文本编辑器,故搜索了之后决定使用百度富文本编辑器Ueditor,以下记录一些遇到的坑吧。

首先在官网上下载我们需要的源码和jar包:

远![这里写图片描述

把最新的1.4.3.3 —Jsp — UTF-8 版本以及完整源码都下载下来备用。

这里写图片描述

项目使用的是Maven构建,其中央仓库中是没有Ueditor需要的ueditor-1.1.2 jar包的,其他所需要的jar是有的,写好其他的jar包的依赖。既然仓库中没有ueditor-1.1.2 jar,那我们从刚下载的完整源码中找到ueditor-1.1.2 jar的源代码,直接拷贝到项目中去。

这里写图片描述
这里写图片描述

之后的话,将解压之后的ueditor1_4_3_3-utf8-jsp里的utf8-jsp文件夹改个名吧,我改成了ueditor,然后将ueditor目录下的jsp目录下的lib目录删了。再将整个ueditor文件夹复制到项目的根目录下,放到其他目录下也可以,但在根目录下接下来的操作方便一点。

这里写图片描述

这样之后,Ueditor富文本编辑器基本能用了。可以写个页面测试一下,然后在浏览器直接访问页面应该能出现一个富文本编辑器了。

下面的代码是Ueditor官网提供的测试代码,就直接用了,只是根据你自己的路径改一下script文件的src地址.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>ueditor demo</title>
</head>
<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
            这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>

</html>

二、后端配置项没有正常加载,上传插件不能正常使用!

首先要知道的是,我们的项目是SpringMVC项目,其中没有配置JSP解析器这些东西,项目中没有任何的jsp页面。

上述测试页面出现富文本编辑框之后,试了下多图上传,但是直接提示:后端配置项没有正常加载,上传插件不能正常使用!

了解一下Ueditor的工作流程:

在ueditor目录下有一个ueditor.config.js文件,里面定义了一个服务器统一请求接口路径:serverUrl: URL + “jsp/controller.jsp”,即当页面开始实例化富文本编辑器时,即访问controller.jsp。而controller.jsp里面有什么呢?里面只有一段Java代码,即使用request和rootPath实例化一个ActionEnter 实例,并执行了其exec()方法。

我们再看一下ActionEnter实例化时做了什么工作:
public ActionEnter ( HttpServletRequest request, String rootPath ) {

        this.request = request;
        this.rootPath = rootPath;
        this.actionType = request.getParameter( "action" );
        this.contextPath = request.getContextPath();
        this.configManager = ConfigManager.getInstance( this.rootPath, this.contextPath, request.getRequestURI() );

    }

这是ActionEnter实例化代码,可以看到其中ConfigManager.getInstance(…)这行代码是得到一个配置管理器。转到其中去看一下,可知也是实例化一个ConfigManager实例,看一下实例化方法:

/*
* 通过一个给定的路径构建一个配置管理器, 该管理器要求地址路径所在目录下必须存在config.json文件
*/
    private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {

        rootPath = rootPath.replace( "\\", "/" );

        this.rootPath = rootPath;
        this.contextPath = contextPath;

        if ( contextPath.length() > 0 ) {
            this.originalPath = this.rootPath + uri.substring( contextPath.length() );
        } else {
            this.originalPath = this.rootPath + uri;
        }

        this.initEnv();

    }

这里面有四个路径我们应该是都知道的:

rootPath :这个路径从前面的代码传回来的可知是项目的实际路径,即

        D:/git/person/spring-ueditor/current/

contextPath : 这个是从request中得到的,有还是没有并不影响

uri:得到的是访问url的后一部分。

        /ueditor/jsp/controller.jsp

originalPath:由rootPath 和uri组成

        D:/git/person/spring-ueditor/current//ueditor/jsp/controller.jsp

实例化最后执行了initEnv()方法:

private void initEnv () throws FileNotFoundException, IOException {

        File file = new File( this.originalPath );

        if ( !file.isAbsolute() ) {
            file = new File( file.getAbsolutePath() );
        }

        this.parentPath = file.getParent();

        String configContent = this.readFile( this.getConfigPath() );

        try{
            JSONObject jsonConfig = new JSONObject( configContent );
            this.jsonConfig = jsonConfig;
        } catch ( Exception e ) {
            this.jsonConfig = null;
        }

    }

可以看出这里就是关键的地方了,首先是根据实例化配置管理器时得到的originalPath实例化一个File对象,然后从这个file对象的父目录得到parentPath:D:\git\person\spring-ueditor\current\ueditor\jsp

,然后是this.getConfigPath(),组成了config.json所在的实际路径:

D:\git\person\spring-ueditor\current\ueditor\jsp\config.json

,这些工作都是为了读取到config.json中的配置参数。

工作原理就是这样,接下来解决实际问题:

首先由上述分析可知,加载编辑器时访问的是controller.jsp,这在项目中首先是通不过的,你直接访问它就和访问一个txt文件一样得到的是源代码,而不执行任何东西。
故而首先我们需要使用spring的方式写一个控制器去实现controller.jsp所实现的功能。
@Controller
@RequestMapping("ueditor")
public class UeditorController {

    private static final Logger logger = LoggerFactory.getLogger(UeditorController.class);

    @RequestMapping("/ueditorConfig")
    public void ueditorConfig(HttpServletRequest request, HttpServletResponse response) {

        response.setContentType("application/json");
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        try {
            request.setCharacterEncoding( "utf-8" );
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
           logger.warn("UeditorController#ueditorConfig exception:",e);
        }
    }
}
控制器的代码基本和jsp文件的代码一致,功能相同。现在问题是如何使编辑器加载时访问这个url呢。上述分析也告知我们在ueditor目录下有一个ueditor.config.js文件,里面定义了一个服务器统一请求接口路径:serverUrl: URL + “jsp/controller.jsp”,这个URL就是相对于根目录的路径,在这里就是/ueditor/。
故而我们可以直接修改这个serverUrl,将之改为 —– > serverUrl: URL + “ueditorConfig”,这个url组合起来就是/ueditor/ueditorConfig ,就是控制器的访问路径了。
但这样改了之后重新加载编辑器还是出现相同的问题,打了断点之后一步一步瞧了瞧,发现是配置管理器没有实例化成功。最后想了下,我们执行控制器的初衷是加载config.json的配置参数,而根据/ueditor/ueditorConfig这个控制器的访问路径最后组合出来的路径是:

D:\git\person\spring-ueditor\current\ueditor\config.json

所以,我们将config.json上移一级目录。将之放到ueditor目录下就可以了。

三、请求后台配置项http错误,上传功能将不能正常使用!

今天在调试百度的富文本编辑器时突然出现的一个问题:provisional headers are shown。

这里写图片描述

这里写图片描述

可见富文本编辑器Ueditor 报错: 请求后台配置项http错误,上传功能将不能正常使用

并且 查看请求时出现 上述标注的错误: provisional headers are shown

这里这种情况的出现是由于在客户端发出请求后,服务端由于一些原因迟迟未返回响应结果,导致客户端长时间未收到响应才出现这种报错。

而我调试时出现这种问题,是因为我调试打了断点在一行行查看代码,导致迟迟未给客户端响应,故报错!我去掉了断点顺利执行。

猜你喜欢

转载自blog.csdn.net/liujun03/article/details/82225611
今日推荐