本文学习自: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文件夹中。
导入项目。
二、使用方法
<!-- 加载编辑器的容器 -->
<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;
}
注意:
- 前端请求通过唯一的后台文件 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
多图片上传就是发送多次请求。代码一样。