关于百度ueditor文件上传功能

      最近项目中使用到了文本编辑器,由于uditor功能相对比较齐全,所以就选择了ueditor,于是乎就查找了相关的api(uditor api 地址),发现写得很简单,特别是关于图片上传,多图上传,视频上传等模块,写得简单不易看懂。

      完成图片上传的功能花了一天半的时间,第一天很迷茫,无从下手,官网api是靠不住了,于是开始在茫茫大百度中开始寻找答案,接下来说说ueditor关于图片上传和视频上传遇到的问题以及解决办法。

首先看一眼ueditor的真面目:


关于百度ueditor文件上传功能_第1张图片
ueditor

先看看ueditor几个重要的文件:

ueditor.all.js  ---   ueditor的入口,用于初始化插件等作用

ueditor.config.js   ---  ueditor完整配置项

controller.jsp      ----   相当于是一个action方法,用于请求返回config.json 文件

config.json        -----   上传等功能都是在这个文件里配置

在这里怎么在你的网页中嵌入ueditor我就不说了,很简单的引入文件,api有说明。

首先我们会看到以下错误:

这个错误的原因是由于config.json没有正确返回


关于百度ueditor文件上传功能_第2张图片

serverUrl 请求controller.jsp,

关于百度ueditor文件上传功能_第3张图片

然后返回config.json配置文件,一开始以为是由于controller.jsp这个文件被拦截了,没有请求到此jsp文件,后来在过滤器放开了这个文件的访问,还是会出现此错误,所以干脆就不用这个jsp文件,用java代码重写,重写代码如下:


关于百度ueditor文件上传功能_第4张图片

我们用的是grails项目,所以看起来和spring有点区别,但其实就是java代码。这个方法的作用就是读取config.json文件,然后返回json格式的数据。然后修改

关于百度ueditor文件上传功能_第5张图片

地址改成刚才我们写的java方法,然后刷新页面,发现错误没有了。

因为我们的图片是上传到fdfs文件服务器上,所以我需要改写图片上传的路径:


关于百度ueditor文件上传功能_第6张图片

改成自己实现的action方法,


关于百度ueditor文件上传功能_第7张图片

该方法必须返回ueditor指定的json格式:

然后就能实现图片上传。


关于百度ueditor文件上传功能_第8张图片

视频上传也是一样的,找到相应的配置文件,修改即可。

总结:

1.首先得搞清楚上传用到的文件,已经文件相关的内容。

2.判断controller.jsp是否被拦截器拦截(该文件不能被拦截,也可用controller重写此方法,但要修改serverUrl请求的路径)

3.判断controller.jsp返回的config.json数据格式是否正确,必须为json数据。


以上是自己简单的记录,如有问题,请帮忙指正!!  如果遇到此类问题不知道如何解决,欢迎留言!!

你可能感兴趣的:(关于百度ueditor文件上传功能)