Javaweb整合Ueditor,自定义图片上传回显(踩坑详解)
到Ueditor官网下载demo,这个就不再赘述
把所有的内容拷贝到项目中
把jsp/lib/中的所有jar包拷贝到WEB-INF/lib中
在webContent根目录中创建index.jsp(html也可以),再按照demo中的index.html引入ueditor
注意修改引入文件的路径,我是把整个ueditor文件拷贝过来的,所以路径是ueditor/xxxx
<html>
<head>
<title>$Title$</title>
</head>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>
<body>
<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</body>
<script type="text/javascript">
var ue = UE.getEditor('editor');
</script>
</html>
运行项目,怎么创建Javaweb项目、如何集成Tomcat就不再赘述
项目运行后,进入到index.jsp首页中,如果能正常显示ueditor界面就证明引入成功了
接下来就要完成自定义上传图片,以及图片回显的功能了
首先我们要了解一下uedirot上传图片的流程:
1.在页面加载完成的时候,ueditor会发送一个/jsp/controller.jspaction=config&&noCache=1585043435725的GET请求。
而这个get请求是用来加载jsp/config.json文件的,源码就不再展开分析,博主也是看了一篇介绍ueditor文章才得知的(链接已找不到)
2.此时我们点击上传图片,随便选择一张图片,点击上传(肯定是无法回显的)
可以看到,点击上传图片,会向和上面相同的URL发送一个POST请求,只是action参数变为了uploadImage
3.而这个URL来源于哪里呢?
就来源于ueditor.config.js
// 服务器统一请求接口路径
, serverUrl: URL + "jsp/controller.jsp"
所以我们需要自定义上传图片,这个URL路径必须要改
先准备两个接口,一个上传图片的接口,一个通过图片的文件名获得图片的接口
下面开始写后端代码
1.首先是上传图片的接口
前面说过,ueditor加载config.json和上传图片使用的是同一个接口,并且会在页面加载完成时发送get请求,上传图片时发送post请求
因此我们需要在一个servlet中写一个doGet方法来处理get请求并且返回config.json
@Override
protected void doGet(HttpServletRequest req, HttpServlet