首先要介绍summernote这个编辑器。
是基于bootstrap而使用的。由于IE8对Jquery和bootstrap都有要求。基本确定在Jquery-1.8.0这个版本左右。
推荐一个网站 bootstrap中文网,这里有很多的js,css静态资源,可以去下载。额外提一个,如果下载font-awesome.css
记得把相关的字体文件下下来。以上库中具有提供。
下面是summernote的初始化
<!DOCTYPE html>
<html lang='ZH_CN'>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<title>summernote</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script>
<!-- include bs-->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.0.3/css/bootstrap.css" />
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.0.3/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.0.2/css/font-awesome.css" >
<!-- include summernote -->
<link rel="stylesheet" href="http://cdn.bootcss.com/summernote/0.5.9/summernote.css">
<script type="text/javascript" src="http://cdn.bootcss.com/summernote/0.5.9/summernote.js"></script>
<!--选择中文语言环境的js 这里下载 -->
<!--http://pan.baidu.com/s/1gdIO0pX-->
<script type="text/javascript" src="summernote-zh-CN.js"></script>
<script type="text/javascript">
$(function() {
$('#summernote').summernote({
height: 200,
width:820,
focus:false,
lang:'zh-CN',
onImageUpload: function(files, editor, editable) {
sendFile(files[0],editor,editable);
}
});
});
function sendFile(file,editor,editable) {
data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: "POST",
url: "upload/upload",/*填写后台上传文件的路径*/
cache: false,
contentType: false,
processData: false,
success: function(url) {/*url为上传成功后返回的图片路径*/
editor.insertImage(editable, url);
}
});
}
</script>
</head>
<body>
<!--此时的表单只是普通表单,并不是上传表单,-->
<form action="upload/subform" method="post">
<!-- id必须为summernote-->
<textarea id="summernote" name="areaCode">${areaCode}</textarea>
<button type="submit" class="btn btn-default">submit</button>
</form>
</body>
</html>
以上HTML代码
关于summernote.js源码问题 因为默认的文件样式是无法修改的。只能曲线救国了。
找到源码中 ctrl+f 找note-image-input 。
给这个文件的input加个属性 style='display:none;'
然后再这个input前面再加个button 加上事件 onclick='$(this).next().click();'
通过这个按钮触发选择文件的click事件。
再附上我自己写的按钮样式
.mybtn{
width:100px;
height:30px;
display:inline-block;
background-color:rgb(91,183,91);
border:1px solid rgb(91,183,91);
border-radius:3px;
color:white;
font-size:14px;
font-family:微软雅黑;
cursor:pointer;
text-align:center;
vertical-align: center;
box-shadow:0px 0px 1px 1px rgb(91,160,91);
}
效果图就是这样的:
JFinal 后台
//表单接收
public void subform(){
String areaCode = getPara("areaCode");
setAttr("areaCode", areaCode);
render("/index.jsp");
}
//关于上传 请参考我的另一篇记录
public void upload(){
UploadFile uploadFile = getFile();
File f = Util.renameFile(uploadFile, "");
if(f!=null){
//upload为默认的文件存放路径
renderText("upload/"+f.getName());
}
}
请检查自己的相关jar包、路由配置等信息,以免不必要的错误。
感谢Github上贡献的开发者,