Ueditor自定义图片上传路径,以及图片回显路径

最近发现Ueditor有个小bug,每次图片都上传到项目路径下,当重新发布一个版本后,图片就没了,所以决心修改

结构如下:

Ueditor自定义图片上传路径,以及图片回显路径_第1张图片

1. 首先,进入config.json,修改如下:其他的都不改,只改选中部分,这个是图片访问路径前缀

Ueditor自定义图片上传路径,以及图片回显路径_第2张图片

我们要关注的是【文件访问路径】和【文件上传路径】

然后,分析就开始了

【分析1】:查找上传路径在哪里用到了,即【imagePathFormat】,只要找到他,就可以找到上传的绝对路径,这样才可以修改为自己想要的,话不多说,全文查找【imagePathFormat】,结果如下:

Ueditor自定义图片上传路径,以及图片回显路径_第3张图片

【分析2】:打开上面查找到的这个文件,看了下,代码如下,这个类主要获取json中配置的参数,现在要看在哪调用了这个方法,一样,全文查找【getConfig】,查找结果如下:

Ueditor自定义图片上传路径,以及图片回显路径_第4张图片

Ueditor自定义图片上传路径,以及图片回显路径_第5张图片

【分析3】:查找到如上调用该方法的类,我们进去看看他是做什么的,部分代码如下:字面上的意思是,上传图片视频文件时,执行这个方法,自然而然就知道了, 【state = new Uploader( request, conf ).doExec();】这个就是上传文件的方法

Ueditor自定义图片上传路径,以及图片回显路径_第6张图片

【分析4】:我们找到了上传文件方法,现在进入该方法,代码如下:因为isBase64这个参数配置的是false,所以我们走下面这个方法,继续进入该方法

Ueditor自定义图片上传路径,以及图片回显路径_第7张图片

我们找到了save方法中关键代码,如下,框起来的部分为保存的绝对路径,关键来了,我们知道了保存的绝对路径,就很好修改了,修改方案如下:

Ueditor自定义图片上传路径,以及图片回显路径_第8张图片

【最终修改方案】:

1. 首先,进入config.json,修改如下:其他的都不改,只改选中部分,这个是图片访问路径前缀

Ueditor自定义图片上传路径,以及图片回显路径_第9张图片

2. 进入controller.jsp,修改如下:读取当前项目中,图片上传的根目录

Ueditor自定义图片上传路径,以及图片回显路径_第10张图片

3. 在ActionEnter.java中添加构造方法的参数,将图片保存的根目录传入

Ueditor自定义图片上传路径,以及图片回显路径_第11张图片

4. 修改ConfigManager中这几个位置

Ueditor自定义图片上传路径,以及图片回显路径_第12张图片

Ueditor自定义图片上传路径,以及图片回显路径_第13张图片

在ConfigManager.getConfig方法中,加入下面一行代码

Ueditor自定义图片上传路径,以及图片回显路径_第14张图片

5. 修改BinaryUploader.java中,文件上传路径

Ueditor自定义图片上传路径,以及图片回显路径_第15张图片

到这里就结束了,现在可以测试下

原来编辑器中存放的都是相对路径,现在呢

Ueditor自定义图片上传路径,以及图片回显路径_第16张图片

********************************完美显示********************************

再看看我们的路径

Ueditor自定义图片上传路径,以及图片回显路径_第17张图片


修改到这里,你以为结束了吗?其实我也以为结束了,后来又发现了一个问题

描述:当上传一个图片,然后粘贴文字之后,图片路径变了,变成相对路径了

原因:UEditor会在粘贴时,出发事件,将原来的图片都抓取到项目路径下,然后刷新图片路径

经过百度,找到这个:https://www.cnblogs.com/lcchuguo/p/5103893.html

参考这个之后,找到ueditor.all.js下面有个如下代码:

Ueditor自定义图片上传路径,以及图片回显路径_第18张图片

将这个地方修改为 return;就可以了,不让他执行下面代码,至此,真的没问题了

虽然步骤有点多,但是等你知道了问题解决的方式,其实不管什么问题都是一样的

你可能感兴趣的:(Ueditor)