- summernote是一个界面比较简洁美观的富文本编辑器
- 文件导入(官方下载地址:http://summernote.org/)
下载回来的文件夹是这样的:
插件的核心文件放在 dist 这个文件夹里面,文件夹内有三个起着重要作用的文件
font文件夹: 将它放在你项目的css 文件的文件夹内否则会加载不出富文本编辑器上面的功能图标
另外还有一个语言的文件需要我们导入一下:
这个文件夹里面有18个国家的语言文件 其中 zh-CN 就是中文的语言文件
总结下来我们需要的文件是:(注意一点font文件夹,将它放在你项目的css 文件的文件夹内否则会加载不出富文本编辑器上面的功能图标)
前端代码实例(使用Summernote富文本编辑器需要创建一个summernote实例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<link rel="stylesheet" href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/summernote.css" rel="stylesheet">
<script src="js/summernote.js"></script>
<script type="text/javascript" src="js/summernote-zh-CN.js" ></script>
</head>
<body>
<div style="margin-left: 20%;width: 500px;height: 200px;">
<div id="summernote"></div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<div style="margin-left: 20%;width: 800px;height: 400px;">
<button id="btn1">显示书写的内容</button><br /><br />
<div id="html" style="width: 800px;height: 300px;background-color: lavender;border: 1px solid;"></div>
</div>
<script>
$(document).ready(function() {
//jquery创建一个summernote实例
$('#summernote').summernote({
//功能图标改为中文
lang: 'zh-CN',
//预设内容
placeholder: '请在此输入内容...',
height: 300,
width:800,
//回调函数
callbacks: {
//初始化
onInit: function() {
//init
},
//焦点
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("上传失败");
}
});
}
}
});
$("button#btn1").click(function(){
var tt=$("#summernote").summernote("code");
$("div#html").html(tt);
alert(tt);
});
});
</script>
</body>
</html>
获取内容:
$("#user-work-content").summernote("code");
插入内容
$("#user-work-content").summernote("code",content);
判断内容是否为空:
var isEmpty = $("#user-work-content").summernote('isEmpty');
还是调用 summernote 的方法,不过这次的参数是 ‘isEmpty’ 这个字符串的参数,调用时会返回一个布尔值,通过这个布尔值可以判断编辑器内容是否为空,true表示空,false表示非空