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>