idea中Spring boot整合ueditor

下载UEditor(https://ueditor.baidu.com/website/download.html)1.4.3.3 Jsp 版本 UTF-8版

2、把ueditor放到项目中

3、建立html页面、页面引用ueditor

4、并在页面中初始化ueditor

 <div>
      <script id="container" name="cpro"  type="text/plain"></script>
 </div>

$(function() {
    UE.delEditor("container");
    var ue = UE.getEditor("container");
    ue.ready(function() {

    });
    UE.delEditor("container-e");
    var ue2 = UE.getEditor("container-e");
});

6、maven中引用ueditor相关jar包，其中上传支持需要五个包，我们只需要引用其中一个包即可，其它的包在springboot中已经引入。

maven中找到下列资源，要找好版本。

 <!-- https://mvnrepository.com/artifact/com.gitee.qdbp.thirdparty/ueditor -->
        <dependency>
            <groupId>com.gitee.qdbp.thirdparty</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.4.3.3</version>
        </dependency>

7、建立自己的Controller，通过Controller访问当前页面，出现如下界面，说明ueditor引入成功,但此时会发现上传图片按钮不可用

8、为什么会出现这种问题呢？看ueditor的目录结构就知道了：

当我们打开路径请求页面时会发现一个请求，可以判断UEditor向后台的请求要经过controller.jsp，这个请求地址是在ueditor.config.js中配置的，官方文档中也有说明

在jsp文件夹下面除了jar包外还有两个文件，一个是controller.jsp和config.json，controller.jsp其实就是为了获取config.js中的配置

通过分析我们知道了，spring boot中不能直接将请求发送到这个controller.jsp（请求地址变成了一个下载链接），我们应该新建一个控制器UEditorController将controller.jsp的内容拷贝进去，并修改rootPath指向到json文件夹所在的位置。

public class UEditorController {
    @RequestMapping(value="/ueditorConfig")
    public void config(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        String rootPath =ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static/ueditor/jsp";
        //String rootPath=request.getServletContext().getRealPath("static/ueditor/jsp");
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

}

看看这个rootPath,查阅官方文档和相关资料，原来所有请求经过controller.jsp时都要先加载配置文件config.json，而这个rootPath就是配置文件所在的目录。out.write()就是输出（返回）这个json格式的配置信息。

同时我们需要去修改ueditor.config.js中配置的服务器统一请求接口路径serverUrl的值来指向这个方法。具体修改如下：

注：原来的时候访问需要调用的是URL中的地址，此时路径上会带一个ueditor，我们一定要新建一个server_url来替换掉原来的URL,而其中的"/ueditorConfig"则是指向到自己建UEditorController，这样就可以正常加载config.json文件

9、点击图片上传：发现图片可以上传，但是没有正确显示

原因是我们没有配置config.json中的imageUrlPrefix路径访问路径引起的，改成配置如下：

再试，一切正常

idea中Spring boot整合ueditor

猜你喜欢