我们可自定义工具栏按钮使simditor实现更丰富和实现上传图片功能
初始化编辑器
<script type="text/javascript">
$(function(){
toolbar = [ 'title', 'bold', 'italic', 'underline', 'strikethrough',
'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|',
'link', 'image', 'hr', '|', 'indent', 'outdent' ];
var editor = new simditor( {
textarea : $('#editor'),
placeholder : '这里输入内容...',
toolbar : toolbar, //工具栏
defaultimage : 'simditor-2.0.1/images/image.png', //编辑器插入图片时使用的默认图片
upload : {
url : 'imgupload.action', //文件上传的接口地址
params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
filekey: 'filedatafilename', //服务器端获取文件数据的参数名
connectioncount: 3,
leaveconfirm: '正在上传文件'
}
});
})
</script>
upload默认为false,设置为true或者键值对就可以实现上传图片,界面是出来了,还需要进行后台编码(本例为struts2)
实现功能之前需要修改一下simditor.js,我们可以对"本地图片" 用chrome审查元素发现没有name属性
打开simditor.js找到
return $input = $('<input type="file" title="' + simditor._t('uploadimage') + '" accept="image/*">').appendto($uploaditem);这一行,
可以搜索accept="image/*" 快速找到在input里加上 name="filedata"
如下：
return _this.input = $('<input name="filedata" type="file" title="' + simditor._t('uploadimage')
+ '" accept="image/*">').appendto($uploadbtn);
同样继续搜索accept="image/*" 下面还有一个,加上name="filedata"
imguploadaction
public class imguploadaction extends actionsupport {
private static final long serialversionuid = 1l;
private string err = "";
private string msg; //返回信息
private file filedata; //上传文件
private string filedatafilename; //文件名
public string imgupload() {
//获取response、request对象
actioncontext ac = actioncontext.getcontext();
httpservletresponse response = (httpservletresponse) ac.get(servletactioncontext.http_response);
httpservletrequest request = (httpservletrequest) ac.get(servletactioncontext.http_request);
response.setcontenttype("text/html;charset=gbk");
printwriter out = null;
try {
out = response.getwriter();
} catch (ioexception e1) {
e1.printstacktrace();
}
string saverealfilepath = servletactioncontext.getservletcontext().getrealpath("/upload");
file filedir = new file(saverealfilepath);
if (!filedir.exists()) { //如果不存在 则创建
filedir.mkdirs();
}
file savefile;
savefile = new file(saverealfilepath + "/" + filedatafilename);
try {
fileutils.copyfile(filedata, savefile);
} catch (ioexception e) {
err = "错误"+e.getmessage();
e.printstacktrace();
}
string file_name = request.getcontextpath() + "/upload/" + filedatafilename;
msg = "{\"success\":\"" + true + "\",\"file_path\":\"" + file_name + "\"}";
out.print(msg); //返回msg信息
return null;
}
public string geterr() {
return err;
}
public void seterr(string err) {
this.err = err;
}
public string getmsg() {
return msg;
}
public void setmsg(string msg) {
this.msg = msg;
}
public file getfiledata() {
return filedata;
}
public void setfiledata(file filedata) {
this.filedata = filedata;
}
public string getfiledatafilename() {
return filedatafilename;
}
public void setfiledatafilename(string filedatafilename) {
this.filedatafilename = filedatafilename;
}
}
相关文章：
simditor使用方法
javascript - simditor 上传图片大小有限制吗？
javascript - simditor 上传大图失败