ueditor下载地址:http://ueditor.baidu.com/website/download.html
简单粗暴,直接上步骤:
去官网下载对应语言的ueditor压缩包,示例为jsp版本,解压缩后文件目录是这个样子的。
理论上放到项目路径上是就可以使用的,但是很多时候往往会出一些奇怪的错误,而且网上资料也很难找到对应的解决方法,要想不出现这种情况,最好的办法就是不修改ueditor的文件目录,(解压时是什么样子就别乱动啦),特别是config.json和controller.jsp的位置,一定不要乱动,config.json中是编辑器的附件上传配置文件,如果位置修改ueditor.all.min.js中获取配置的方法就会找不到配置文件,这样你的编辑器的上传附件功能就会垮掉。
上传图片时ueditor.all.min.js会默认来conifg.json文件中获取名为imageActionName的值作为图片上传的action路径,图片名字为imageFieldName的值,项目中附件时不会上传到tomcat中的,所以他的默认上传肯定行不通,所以你需要自定义一个附件上传的action来处理图片,这时你只需要在页面实例化ueditor的地方加上一段代码即可。
这段代码的意思是当action请求的名称为uploadimage时,就会把数据转发到另外一个请求上。当请求发送到你自定义的action上后你就可以想怎末处理就怎末处理啦。但是当处理完之后你必须返回指定格式的json数据。
包含以上四个字段就ok啦,这里分享一个我自己的自定义图片处理方法。
private final static String imgSavePath="C://imgs//"; //图片上传地址
private final static String imgSrc="http://localhost:8089//"; //图片访问地址
@RequestMapping(value = "/saveImg", method = RequestMethod.POST)
@ResponseBody
public Map<String,Object> saveImg(HttpServletRequest req){
Map<String,Object> rs = new HashMap<String, Object>();
MultipartHttpServletRequest mReq = null;
MultipartFile file = null;
String fileName = "";
// 原始文件名 UEDITOR创建页面元素时的alt和title属性
String originalFileName = "";
try {
mReq = (MultipartHttpServletRequest)req;
// 从config.json中取得上传文件的ID
file = mReq.getFile("upfile");
// 取得文件的原始文件名称
fileName = file.getOriginalFilename();
originalFileName = fileName;
String newstring = fileName.replace(".",",");
String[] arr = newstring.split(",");
Random ran = new Random(System.currentTimeMillis());
SysUser sysUser = (SysUser) req.getSession().getAttribute(ConstantUtil.LOGIN_USER);
String savePath = sysUser.getUserId()+"\\"+ran.nextLong()+"."+arr[arr.length-1];
File path = new File(imgSavePath+sysUser.getUserId());
if(!path.exists()) {
path.mkdir();
}
file.transferTo(new File(imgSavePath+savePath));
/*你的处理图片的代码*/
rs.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
rs.put("url",imgSrc+savePath); //能访问到你现在图片的路径
rs.put("title", originalFileName);
rs.put("original", originalFileName);
} catch (Exception e) {
rs.put("state", "文件上传失败!"); //在此处写上错误提示信息,这样当错误的时候就会显示此信息
rs.put("url","");
rs.put("title", "");
rs.put("original", "");
}
return rs;
}
自定义编辑器按钮.
ueditor中所有的按钮都是定义在ueditor.config.js中的,多个按钮以json数组的形式配置在文件中,如果不想要那些按钮,把对应的注释掉就可以啦。
toolbars: [[
//'anchor', //锚点
'undo', //撤销
//'redo', //重做
'bold', //加粗
//'indent', //首行缩进
//'snapscreen', //截图
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
//'subscript', //下标
//'fontborder', //字符边框
//'superscript', //上标
'formatmatch', //格式刷
// 'source', //源代码
//'blockquote', //引用
//'pasteplain', //纯文本粘贴模式
'selectall', //全选
//'print', //打印
'preview', //预览
'horizontal', //分隔线
//'removeformat', //清除格式
'time', //时间
'date', //日期
//'unlink', //取消链接
//'insertrow', //前插入行
//'insertcol', //前插入列
//'mergeright', //右合并单元格
//'mergedown', //下合并单元格
// 'deleterow', //删除行
//'deletecol', //删除列
//'splittorows', //拆分成行
//'splittocols', //拆分成列
//'splittocells', //完全拆分单元格
//'deletecaption', //删除表格标题
'inserttitle', //插入标题
//'mergecells', //合并多个单元格
//'deletetable', //删除表格
//'cleardoc', //清空文档
//'insertparagraphbeforetable', //"表格前插入行"
//'insertcode', //代码语言
'fontfamily', //字体
'fontsize', //字号
//'paragraph', //段落格式
'simpleupload', //单图上传
//'insertimage', //多图上传
//'edittable', //表格属性
//'edittd', //单元格属性
//'link', //超链接
'emotion', //表情
//'spechars', //特殊字符
//'searchreplace', //查询替换
'map', //Baidu地图
// 'gmap', //Google地图
//'insertvideo', //视频
//'help', //帮助
//'justifyleft', //居左对齐
//'justifyright', //居右对齐
//'justifycenter', //居中对齐
//'justifyjustify', //两端对齐
'forecolor', //字体颜色
//'backcolor', //背景色
//'insertorderedlist', //有序列表
//'insertunorderedlist', //无序列表
'fullscreen', //全屏
//'directionalityltr', //从左向右输入
//'directionalityrtl', //从右向左输入
//'rowspacingtop', //段前距
// 'rowspacingbottom', //段后距
// 'pagebreak', //分页
//'insertframe', //插入Iframe
//'imagenone', //默认
//'imageleft', //左浮动
//'imageright', //右浮动
// 'attachment', //附件
//'imagecenter', //居中
// 'wordimage', //图片转存
//'lineheight', //行间距
'edittip ', //编辑提示
'customstyle', //自定义标题
'autotypeset', //自动排版
//'webapp', //百度应用
//'touppercase', //字母大写
//'tolowercase', //字母小写
//'background', //背景
//'template', //模板
//'scrawl', //涂鸦
//'music', //音乐
//'inserttable', //插入表格
//'drafts', // 从草稿箱加载
//'charts', // 图表
]]
注释掉后效果图如下:
非常简洁有没有!