Javaweb整合Ueditor，自定义图片上传回显（不改源码，只改一个路径！）

最新推荐文章于 2024-07-27 13:31:57 发布

林染_

最新推荐文章于 2024-07-27 13:31:57 发布

阅读量531

点赞数

分类专栏： ueditor 文章标签： java web html js

本文链接：https://blog.csdn.net/qq_39187063/article/details/105076725

版权

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, HttpServletResponse res

最低0.47元/天解锁文章

林染_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Javaweb整合Ueditor，自定义图片上传回显（不改源码，只改一个路径！）

Javaweb整合Ueditor，自定义图片上传回显（踩坑详解）到Ueditor官网下载demo，这个就不再赘述把所有的内容拷贝到项目中把jsp/lib/中的所有jar包拷贝到WEB-INF/lib中在webContent根目录中创建index.jsp（html也可以），再按照demo中的index.html引入ueditor注意修改引入文件的路径，我是把整个ueditor文件拷...
复制链接

扫一扫

专栏目录