欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

simditor使用

程序员文章站 2022-05-26 17:55:27
...

首先是使用,根据官网说明,写了下面初始化的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。