- 下载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路径访问路径引起的,改成配置如下:
再试,一切正常