summernote富文本简洁易用,主要是有一个图片大小编辑功能：
具体参数配置请查阅官方文档网址：https://summernote.org/deep-dive/（英文文档）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="hjl">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>summernote</title>
<link href="summernote.css" rel="stylesheet"/>
<script src="summernote.min.js" type="text/javascript"></script>
</head>
<body>
<div class="summernote"></div>
<script type="text/javascript">
$('.summernote').summernote({
placeholder: '请输入图文消息',
height : 350,//输入区域高度
lang : 'zh-CN',
followingToolbar: false,
callbacks: {
onImageUpload: function (files) {
//上传图片方法
sendFile(files[0], this);
}
}
});
// 上传文件
function sendFile(file, obj) {
var data = new FormData();
data.append("file", file);
$.ajax({
type: "POST",
//上传路径
url: "/upload",
data: data,
cache: false,
contentType: false,
processData: false,
dataType: 'json',
success: function(result) {
//返回格式{"url": ,"fileName": }
if (result.code == web_status.SUCCESS) {
$(obj).summernote('editor.insertImage', result.url, result.fileName);
} else {
$.modal.alertError(result.msg);
}
},
error: function(error) {
$.modal.alertWarning("图片上传失败。");
}
});
}
//获取输入的文本代码
var sHTML = $('.summernote').summernote('code');
console.log(sHTML);
</script>
</body>
</html>