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。
上一篇: [Vue warn]: “style“ is a reserved attribute and cannot be used as component prop.
下一篇: java全角、半角标点符号 操作
推荐阅读
-
解析PHP 使用curl提交json格式数据_PHP
-
剖析使用PHP shell脚本
-
怎样使用node做出个人号机器人
-
在编写存储过程时使用 Set NoCount On_MySQL
-
百度地图简单使用--添加折线,圆形等(html,js)_html/css_WEB-ITnose
-
使用VueAwesomeSwiper容易出现的问题?
-
jquery中eq和get的区别与使用方法_jquery
-
使用了min-height后出现了问题_html/css_WEB-ITnose
-
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包_jquery
-
使用Github进行协作开发