simditor使用

首先是使用，根据官网说明，写了下面初始化的function。这样就把一个textarea转化成simditor的富文本编辑器了。相关参数使用可以在官网查询，比较详细。

官网地址：http://simditor.tower.im/

 

function simditorInit(){
	toolbar = [ 'title', 'bold', 'italic', 'underline', 'strikethrough',
	            'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|',
	            'link', 'image', 'hr', '|', 'indent', 'outdent' ];
	   var param = {
            "param.meetingCode":"code123"
        };
	    var editor = new Simditor({
	        textarea : $('#editor'),
	        placeholder : '这里输入内容...',
	        toolbar : toolbar,  //工具栏
	        defaultImage : 'simditor-2.0.1/images/image.png', //编辑器插入图片时使用的默认图片
	        upload : {
	            url : "${pageContext.request.contextPath }/meeting/imgUpload.action", //文件上传的接口地址
	            params: param, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
	            fileKey: 'fileDataFileName', //服务器端获取文件数据的参数名
	            connectionCount: 3,
	            leaveConfirm: '正在上传文件'
	        }  
	    })
}

官网DEMO中没有体现的是图片上传upload动作。如果要使用是需要在启动配置中指定，如上面upload那一段

 

 upload : {
	            url : "${pageContext.request.contextPath }/meeting/imgUpload.action", //文件上传的接口地址
	            params: param, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
	            fileKey: 'fileDataFileName', //服务器端获取文件数据的参数名
	            connectionCount: 3,
	            leaveConfirm: '正在上传文件'
	        }  

这样就和struts2结合起来了。参数通过params传递，文件名是fileDataFileName，文件对象的传递需要修改一下simditor.js源码

 

 return $input = $('<input type="file" title="' + _this._t('uploadImage') + '" accept="image/*">').appendTo($uploadItem);

给input添加上name这样就可以在action中得到file对象了。源码中一共需要修改两处。搜索【accept="image/*"】这个关键字就可以找到这两处了。

 

接下来就是java来处理上传图片动作了

 

	public String imgUpload() throws IOException{
		List<Map<String, Object>> mapList = new ArrayList<Map<String, Object>>();
		String meetingCode = param.get("meetingCode");
		String path = meetingService.updateUploadImg(meetingCode,fileData,fileDataFileName);
		this.jsonMap.put("success", true);
		this.jsonMap.put("msg", "上传成功");
		this.jsonMap.put("file_path",path);
		
		return Action.SUCCESS;
	}

 

具体上传动作就不再说明了，需要返回的是JSON格式的数据，几个重要的key是“success”,"msg","file_path"都是固定的。

success这个没什么可说的，true,false。

其实msg这个key是在上传失败时候使用的。官网也有说明，目前来看，上传成功时候是确实没有提示。

“file_path”这个其实可以不指定，不指定的后果就是simditor会把图片”写”在富文本编辑器中。这种方式是Data URI ，和src的路径指定来说，各有利弊。有兴趣的可以自行百度Data URI。