ueditor图片上传路径配置
Toc
  1. 前端配置文件
  2. 后端配置文件

这星期团队里一个页面的编辑器需要升级,看了下,使用的是百度前端开源项目ueditor,当前使用的版本是1.2.3,线上提供的最新版本是1.4.3。相比我们当前使用的旧版本,新版本曾经重构过文件上传模块webuploader。后来我就是在上传这里遇到了一个问题:上传路径的配置。

整个ueditor有两个配置文件:前端配置文件、后端配置文件。我这边的web应用名为ops,ueditor直接部署在根目录之下。

前端配置文件

前端配置文件为ueditor根目录下的web/ops/ueditor/ueditor.config.js,里面有详细的配置条目介绍。我修改了ueditor的在我web应用中的路径

URL = "/ops/ueditor/";

web应用名为ops,ueditor位于web应用的根目录下。

以及修改服务器统一请求接口路径,从默认的php修改为jsp。

// 服务器统一请求接口路径
, serverUrl: URL + "jsp/controller.jsp"


后端配置文件

后端配置文件为web/ops/ueditor/jsp/config.json,这里配置图片上传路径。按文档说明,图片上传配置两个参数:imagePathFormat、imageUrlPrefix。

1.4.2+ 以后路径配置主要相关的配置项是 PathFormat 和 UrlPrefix 的配置项。

最开始我忽略后者imageUrlPrefix,其保持默认值为空,只是配置前者imagePathFormat为

"imageUrlPrefix": "", /* 图片访问路径前缀 */
"imagePathFormat": "/ueditor/jsp/upload/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

在uditor上上传图片后,图片在编辑器中显示不出来,图片上传后返回的图片链接404了,为

https://localhost:8443/ueditor/jsp/upload/20140630/1404099623210084109.png

而正确的链接应该带上我的web应用名ops,即为

https://localhost:8443/ops/ueditor/jsp/upload/20140630/1404099623210084109.png

尝试修改jsp代码,对返回的图片路径增加上web名,代码demo在github, 重新编译代码,打个uditor.jar包,部署后再上传图片,编辑器中能正确显示出图片来。但后来想了想,还是不对。

再回头看imageUrlPrefix这个配置,在前端的js代码里找到使用它的地方了。

翻多一遍官网文档通过 imageUrlPrefix 配置项给返回路径添加前缀对这个字段的使用场景解释,虽然是用于跨域上传的场景,那配置上我web域名,也应该是可以的。修改配置为

"imageUrlPrefix": "https://localhost:8443/ops", /* 图片访问路径前缀 */
"imagePathFormat": "/ueditor/jsp/upload/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

同时使用回默认的uditor.jar包,嗯,可以了。

未细究代码,简单测试了一下,当前项目版本(1.4.3)这两个配置项的工作:

  1. 图片上传到:当前web应用的绝对路径 + imagePathFormat(如果跨域上传呢,不理解)
  2. 返回imagePathFormat到编辑器
  3. 编辑器拼接imageUrlPrefix + imagePathFormat,形成图片的url。



– EOF –

Categories: web
Tags: ueditor