【前言】

      项目中涉及将UEditor上传服务器整合进已有的基于Spring MVC的服务中,并且将上传到本地改为上传到七牛,看似简单的一个需求,实际做起来还是遇到了一些困难。在这里分享一下经验——

七牛官网的社区插件里有ueditor的插件

UEditor1.4.3.3整合Spring MVC和七牛

该插件是《ueditor上传图片到七牛云存储(form api,java)》的作品,也发布了git地址。从图上时间信息可知这是13年底的插件。

自从百度更新UEditor1.4.0之后,将分散的请求接口整合成一个ActionEnter入口,做了一个比较大的变动,原有的方式已经不适用了。

参考《Ueditor结合七牛云及百度云存储(JAVA版,ueditor-1.4.3)实现图片文件上传》的方法之后,解决了问题。

【UEditor分析】

      该方法涉及到对UEditor源码的改动,所以首先要下载UEditor的源码。具体的二次开发细节和常见问题在UEditor开发文档中写的很清楚

大致说明一下编辑器涉及上传的几个文件:

ueditor.all.min.js是编辑器的汇总js,通过压缩ueditor.all.js得到,也是实际调用的js

      在ueditor.all.js的// core/loadconfig.js中加载了UE.Editor.prototype.loadServerConfig,该结构是根据serverUrl请求config得到的。其实就是获取了服务器的config.json文件,所以该文件在服务器中的路径要格外注意。

config.json里配置了上传的地址等信息

      imageUrlPrefix是图片上传的前缀,这里设置成七牛的上传地址。imagePathFormat是文件名,可以使用原有模版加入日期信息。imageManagerUrlPrefix是图片加载的前缀,上传成功后会从该地址读取图片插入到编辑器中。

ueditor.config.js是配置文件

      值得注意的是var URL = window.UEDITOR_HOME_URL || getUEBasePath();和serverUrl: URL + "jsp/controller.jsp"这两句,一个指定了上传服务器的路径,一个指定了服务接口。

dialog目录管理编辑器中新开的窗口,包括文件上传窗口

internal.js是其入口

【开始】 

【修改文件上传接口】

编辑器整合进spring框架,lib可以通过maven自行加载,这部分比较简单,略过不表。

将UEditor的源码加入spring

UEditor1.4.3.3整合Spring MVC和七牛

再新建一个controller,源码如下

@RestController
public class FileManagerController {
    @RequestMapping(value = "controller")
    public String controller(HttpServletRequest request,HttpServletResponse response) {
        String rootPath = request.getServletContext().getRealPath("/");
        return new ActionEnter( request, rootPath).exec();
    }
}
Controller

相关文章:

  • 2021-08-26
  • 2021-10-22
  • 2021-12-04
  • 2021-07-25
  • 2021-04-25
  • 2021-10-05
  • 2021-10-20
  • 2021-06-23
猜你喜欢
  • 2021-11-01
  • 2022-12-23
  • 2022-12-23
  • 2022-02-04
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案