首页 技术 正文
技术 2022年11月19日
0 收藏 785 点赞 4,277 浏览 3459 个字

前记:由于项目中需要有一个新增数据并且要能支持表格图片上传的功能。使用了ueditor控件。为实现这个功能,从一开始什么都看不懂,到一直连着弄了5天,总算是有了眉目。在此记录一下以便能帮到可以和我一样遇到问题的人!本人使用的是ueditor 1.4.3.3 的jsp 版本的。

首先下载ueditor 开发版 到本地目录

下载地址:http://ueditor.baidu.com/website/download.html

Ueditor1.4.3.3+springMvc+maven 实现图片上传

下载后:Ueditor1.4.3.3+springMvc+maven 实现图片上传

解压后:文件夹名字是  utf8-jsp,

解压后目录是:

Ueditor1.4.3.3+springMvc+maven 实现图片上传

为了能更好的根据自己的项目进行扩展,最好是引入ueditor 源码进行调试修改。当然也可以直接引入ueditor jar 包。但是这种方法不推荐,你无法调试,出了错误也很难定义问题。

下载源码:

Ueditor1.4.3.3+springMvc+maven 实现图片上传

下载后:Ueditor1.4.3.3+springMvc+maven 实现图片上传

解压后:名称是Ueditor1.4.3.3+springMvc+maven 实现图片上传

解压后的目录为:

Ueditor1.4.3.3+springMvc+maven 实现图片上传

到此我们的准备工作就基本完成了,下面开始我们就要引入这些文件并且开始做一些配置了。

第一步:把下载的ueditor 1.4.3.3 的jsp版本的所有东西copy到你的项目的特定的目录下。

在我的项目中我是放在webapp/WEB-INF/scripts/MyEditor下

Ueditor1.4.3.3+springMvc+maven 实现图片上传

想实现ueditor 的图片上传功能,其实主要的配置文件有config.json,  ueditor.config.js 及你的页面和后台controller。

使用之前,我们需要先引入相关的jar 包和源码。 相关jar包在jsp/lib 下面。可直接在 utf8-jsp/jsp/lib 下看到

Ueditor1.4.3.3+springMvc+maven 实现图片上传

jar包引入:我的项目中是使用的maven管理jar包。 所以我直接在pom.xml 中添加相关的依赖。在此我们只需要添加前四个jar包即可。不需要添加ueditor-1.1.2.jar。因为ueditor-1.1.2.jar 是源码打包而来,我们引入源码后,就不需要引入此jar包了。

Ueditor1.4.3.3+springMvc+maven 实现图片上传Ueditor1.4.3.3+springMvc+maven 实现图片上传Ueditor1.4.3.3+springMvc+maven 实现图片上传

然后我们再来引入源码:源码的文件需要去ueditor-1.4.3.3\jsp\src  目录下copy.

把src下的所有东西copy到你的项目中的后台代码的位置。

Ueditor1.4.3.3+springMvc+maven 实现图片上传

前台页面部分:

首先要引入相关的js文件。

Ueditor1.4.3.3+springMvc+maven 实现图片上传

页面使用:ueditor 支持个性化定制。toolbars 是定义你需要的部分。如果不定义,则会调用ueditor.config.js中的toolbars配置。

下图中有一个window.UEDITOR_HOME_URL的配置,此路径是指你的相关js及css 文件存入的位置。请注意不要弄错,否则页面会报js错误,提示找不到相关文件

例如我把我的路径改为  window.UEDITOR_HOME_URL = “${jsUrl}/test/”; 页面报错为:

Ueditor1.4.3.3+springMvc+maven 实现图片上传

<div style=”width:97%;padding-left:10px;”>
<SCRIPT id=”myEditor” align=”center” name=”myEditor” type=text/plain></SCRIPT>
</div>

Ueditor1.4.3.3+springMvc+maven 实现图片上传

接下来看ueditor.config.js 这个文件里配置信息。 此文件中,有两个比较关键的地方,一个是URL, 一个是serverUrl. serverUrl是请求后台读取config.json配置文件的入口。一定不能配错。原生态的配置是  jsp/controller.jsp.   在此,controller.jsp 其实是一个java 文件。一定不能当成简单的jsp去理解。由于原生态的代码里,controller.jsp  和config.json 是在同一个目录下,所以此处serverUrl  用的是  URL+”jsp/controller.jsp”. 但是实际上我们的项目的java 代码可能不在此目录下,这就需要修改入口了。

修改前:

Ueditor1.4.3.3+springMvc+maven 实现图片上传

修改后:

Ueditor1.4.3.3+springMvc+maven 实现图片上传

Ueditor1.4.3.3+springMvc+maven 实现图片上传

上图中, getRootPath方法是获取你的项目的根目录。 例如在我的项目中, getRootPath 返回的就是 http://10.36.0.215:8080/lomsV5-web/

我的项目名称是lomsV5-web

serverUrl 中的  jiKaiPiaoCommonSense 是要请求的controller 的映射。 config 是方法的名称

controller 文件:

Ueditor1.4.3.3+springMvc+maven 实现图片上传

Ueditor1.4.3.3+springMvc+maven 实现图片上传

config 方法即为查找并读取config.json文件信息。注意画红色线的部分有一个actionEnter的类。

点击进入ActionEnter的构造方法, 你会发现有一个叫ConfigManager 的类,一步步查找会发现有一个getConfigPath的方法。

这个方法是获取config.json 文件存入的位置。 我的是放在web-inf 下的classes 下面  所以我的这个方法修改为:

Ueditor1.4.3.3+springMvc+maven 实现图片上传

然后我们打开config.json 文件。 此文件中imageActionName是指图片上传的action名称。 如果配置为uploadimage, 则是调用ueditor 本身原生态的上传方法。应该也是可以自定义自己的上传方法。 然后名称配置成自己的映射。(此问题本人还未测试)。 imageUrlPrefix 是访问路径的缀。 imagePathFormat 是你上传的文件要保存在哪里。

Ueditor1.4.3.3+springMvc+maven 实现图片上传

到了这里,那么你的配置已基本完成

http://10.36.0.215:8080/lomsV5-web/jiKaiPiaoCommonSense/config?action=config

在浏览器输入这个访问路径会出现一串json字符串,是我们在config.json 中配置的信息

Ueditor1.4.3.3+springMvc+maven 实现图片上传

下面主要是说一些在配置过程中可能会遇到的问题:

1. 请求后台配置项http错误,上传功能将不能正常使用!

如果ueditor.config.js 中路径不对或是action名称不对,前台js会报此错误。例如我的修改为:   serverUrl: applicationPath + “/jiKaiPiaoCommonSense/test”

Ueditor1.4.3.3+springMvc+maven 实现图片上传

2. Uncaught ReferenceError: errorHandler is not defined

如果ConfigManager 中的getConfigPath中获取config.json的路径配置不正确会出现此问题。

例如我的修改为:return this.parentPath + File.separator + ConfigManager.configFileName;

Ueditor1.4.3.3+springMvc+maven 实现图片上传

3. 未找到上传数据

如果没有添加过滤器过滤使用百度EmEditor的URI,当点击图片上传后点确定, 则会出现这个问题。

Ueditor1.4.3.3+springMvc+maven 实现图片上传

解决办法:自己添加一个过滤器,对上传的url进行过滤

Ueditor1.4.3.3+springMvc+maven 实现图片上传

在application-context.xml 中配置这个过滤器。过滤器名称不能修改否则不能识别。

Ueditor1.4.3.3+springMvc+maven 实现图片上传

4.  无效的Action

当config.json 中imageActionName 配置不正确时会出现此问题。如我的项目中把 “imageActionName”: “uploadimage”, /* 执行上传图片的action名称 */

修改为: “imageActionName”: “test”, /* 执行上传图片的action名称 */   则出现此问题

Ueditor1.4.3.3+springMvc+maven 实现图片上传

5. 图片上传后显示不了。

这是因为图片访问路径配置不对。例如我的配置是如下:

“imageUrlPrefix”: “/lomsV5-web”, /* 图片访问路径前缀 */
“imagePathFormat”: “/WEB-INF/images/jkpCategory/{time}{rand:6}”, /* 上传保存路径,可以自定义保存路径和文件名格式 */

我的本意是想图片上传后保存在http://10.36.0.215:8080/lomsV5-web/WEB-INF/images/jkpCategory/ 下面。 但是访问图片的时候由于我前台做了映射,所以访问的时候应该是   http://10.36.0.215:8080/lomsV5-web/img/jkpCategory/xx.jpg  才能访问到。   如果只是这样配置会出现上传后图片无法访问。

Ueditor1.4.3.3+springMvc+maven 实现图片上传

解决此问题的方法是:

代码跟踪到BinaryUploader  的 save 方法的 80行,你会发现这里有保存一个url的值。 这个url 便是访问图片的路径的值。 需要修改成正常的访问路径便能正常显示。

Ueditor1.4.3.3+springMvc+maven 实现图片上传

所以我的本地修改为:

storageState.putInfo(“url”, PathFormat.format(savePath.substring(8, savePath.length()).replace(“images”, “img”)));

到了这里,图片便可正常上传访问

Ueditor1.4.3.3+springMvc+maven 实现图片上传

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,028
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,518
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,365
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,146
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,780
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,857