Ueditor 图片自定义上传

本文学习自：http://yt-lemon.iteye.com/blog/2210465 非常感谢！

百度富文本编辑器ueditor 下载地址： http://ueditor.baidu.com/website/download.html

一、准备工作

按需下载不同版本。

下载解压。文件名重命名为ueditor ，整个文件夹放置webapp。或者其他路劲。

maven项目 自己给jsp/lib 中的包添加依赖。 

添加依赖可以 到阿里云的maven仓库中搜索。阿里云maven仓库地址：http://maven.aliyun.com/nexus/#welcome

如果不是maven项目。需要把lib包放入WEB-INF下的lib文件夹中。

导入项目。

二、使用方法

在你需要用的ueditor的地方添加如下代码  注意代码中的js引用地址

<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
添加商品信息
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container',{
autoClearinitialContent:false,
elementPathEnabled:false,
initialFrameWidth:900,
initialFrameHeight:400
});
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action){
if(action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage'){
return '/manager/uploaditemimage';
}else{
return this._bkGetActionUrl.call(this, action);
}
}
</script>

 上图中的第一个script的id 是调用下面的id， UE.getEditor是初始化这个插件，里面有一些参数配置，如: autoClearinitialContent:false,  这个参数是鼠标点击这个编辑器内容的时候，不会清空里面的内容，设置成true，在页面加载这个插件的时候d点击这个编辑器会将编辑器里默认的内容清除掉。参数也可以在uedotor.config.js里面配置。

1.自带图片上传

利用自带的方式图片上传参考：

1：采用ueditor自带的图片上传，配置如下：

上面的配置是要有的，在ueditor加载的时候会全部进入jsp/controller.jsp这文件里



 window.UEDITOR_HOME_URL = "/zhaiqq/ueditor/";  这个配置的是ueditor在项目中的位置，我是直接将ueditor文件放到webroot下面了，写错了这个路径，就会找不到，就不能加载这个插件。下面的imgUrl啊之类的参数大家可以去看看官网的描述，官网写的还是比较清楚的。打开jsp文件下的config.json，这里才是关键，



 我删除了下面很多的配置文件，因为那些都是涂鸦图片上传，截图上传，视频上传，对我来说没有用，我就全部删了，"imageActionName": "uploadimage",这个是调用的是插件自带的action，这里的值不能修改，否则在点击图片上传的时候会报“无效的Action”。



 这两个参数一定要注意：第一个是访问图片的路径前缀，下面的拖上传路径你可以自己修改，没有这个文件夹，系统会自动帮你创建。如果第一个参数写错，你会访问不到（编辑器看不到）图片，如果你看不到图片，请F12看下这图片路径就知道是什么原因了，肯定是你第一个参数没有配置对。只要这些配置好了，插件自带的图片上传就可以搞定了。

2.自定义图片上传

1）在实例化编辑器的时候定义自己的文件上传url

2）后台接收

@RequestMapping("/uploaditemimage")
@ResponseBody
public Object uploadItemImage(HttpServletRequest request) {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile file = multipartRequest.getFile("upfile");
//这里获取到文件 处理上传后返回路径
ImageUploadResult result = new ImageUploadResult();
result.setState("SUCCESS");
result.setUrl("http://*****/images/itemimages/2017/04/06/prize.jpg");
result.setOriginal("prize.jpg");
result.setTitle("prize.jpg");

return result;
}

这里返回json格式的数据。前端会自己解析处理。

注意：
为了规范化前后端通信的请求，这里统一规范前端请求格式和后端数据返回格式

前端请求通过唯一的后台文件 controller.php处理前端的请求
controller.php通过GET上的action参数，判断是什么类型的请求
省去不必要的请求，去除涂鸦添加背景的请求，用前端FileReader读取本地图片代替
请求返回数据的格式，常规返回json字符串，数据包含state属性（成功时返回'SUCCESS'，错误时返回错误信息）。
请求支持jsonp请求格式，当请求有通过GET方式传callback的参数时，返回json数据前后加上括号，再在前面加上callback的值，格式类似这样：

public class ImageUploadResult {
public String state;
public String url;
public String title;
public String original;
}

这里的格式参考ueditor的文档说明：http://fex.baidu.com/ueditor/#dev-request_specification

多图片上传就是发送多次请求。代码一样。
b300