百度ueditor的简单使用

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', // 图表
				]]

注释掉后效果图如下:


非常简洁有没有!


猜你喜欢

转载自blog.csdn.net/w_dongqiang/article/details/80704109
今日推荐