summernote
summernote是比较简洁的一款富文本框,获取值,赋值方便
$('#summernote').summernote({
lang : 'zh-CN',// 语言
height : 100, // 高度
width : '100%',
minHeight : 300, // 最小高度
placeholder : '请输入文章内容', // 提示
// summernote自定义配置
toolbar: [
['operate', ['undo','redo']],
['magic',['style']],
['style', ['bold', 'italic', 'underline', 'clear']],
['para', ['height','fontsize','ul', 'ol', 'paragraph']],
['font', ['strikethrough', 'superscript', 'subscript']],
['color', ['color']],
['insert',['picture','video','link','table','hr']],
['layout',['fullscreen','codeview']],
]
回调函数
callbacks: {
//初始化
onInit: function() {
//init
},
onChange: function(contents, $editable) {
//change
}
//焦点
onFocus: function() {
//focus
},
//图片文件上传
onImageUpload: function(files, editor, $editable) {
data = new FormData();
data.append("file", files[0]);
$.ajax({
data : data,
type : "POST",
url : "",
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {
//[服务器所在文件所在目录位置]一般为"http://119.23.216.181/RoboBlogs/Upload_File/default_show.png"
$('#summernote').summernote('insertImage', "[服务器所在文件所在目录位置]");
},
error:function(){
alert("上传失败");
}
});
}
}
});
创建一个summernote,设置语言、高度、宽度、自定义控件等
<link rel="stylesheet" charset="utf-8" href="<%=request.getContextPath()%>/themes/static/css/font-awesome.min.css">
<link rel="stylesheet" charset="utf-8" href="<%=request.getContextPath()%>/themes/static/ajax/libs/summernote/summernote.css">
<link rel="stylesheet" charset="utf-8" href="<%=request.getContextPath()%>/themes/static/ajax/libs/summernote/summernote-bs4.css">
<link rel="stylesheet" charset="utf-8" href="<%=request.getContextPath()%>/themes/static/ajax/libs/summernote/summernote-lite.css">
<script language="javascript" charset="utf-8" src="<%=request.getContextPath()%>/themes/static/ajax/libs/summernote/summernote.js"></script>
<script language="javascript" charset="utf-8" src="<%=request.getContextPath()%>/themes/static/ajax/libs/summernote/summernote-bs4.js"></script>
<script language="javascript" charset="utf-8" src="<%=request.getContextPath()%>/themes/static/ajax/libs/summernote/summernote-lite.js"></script>
<script language="javascript" charset="utf-8" src="<%=request.getContextPath()%>/themes/static/ajax/libs/summernote/summernote-zh-CN.js"></script>
<script language="javascript" charset="utf-8" src="<%=request.getContextPath()%>/themes/static/ajax/libs/layer/layer.min.js"></script>
取值
var tt=$("#summernote").summernote("code");//取值
$("#remake").html(tt);//将值放入控件,最好是文本域