官网:http://summernote.org/
Summernote是基于Bootstrap的文本编辑器
Summernote默认上传图片是保存二进制图片数据,这样会造成数据库庞大,
我们现在就把它修改为上传到服务器,直接保存路径地址
不多说,直接上干货
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试上传图片</title>
</head>
<!-- include libraries(jQuery, bootstrap) -->
<script type="text/javascript" src="__ROOT__/Public/js/jquery.min.js"></script>
<script type="text/javascript" src="__ROOT__/Public/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="__ROOT__/Public/css/bootstrap.min.css" />
<!-- include summernote css/js-->
<script src="__ROOT__/Public/plugins/summernote/summernote.min.js"></script>
<script src="__ROOT__/Public/plugins/summernote/lang/summernote-zh-CN.js"></script>
<link href="__ROOT__/Public/plugins/summernote/summernote.css" rel="stylesheet">
<body>
<div id="summernote">Hello Summernote</div>
<script language="javascript">
$(document).ready(function() {
$('#summernote').summernote({
height: "500px",
callbacks: {
onImageUpload: function(files) { //the onImageUpload API
img = sendFile(files[0]);
}
}
});
});
function sendFile(file) {
data = new FormData();
data.append("file", file);
console.log(data);
$.ajax({
data: data,
type: "POST",
url: "{:U('Test/upload')}",
cache: false,
contentType: false,
processData: false,
success: function(url) {
$("#summernote").summernote('insertImage', url, 'image name'); // the insertImage API
}
});
}
</script>
</body>
</html><strong>
</strong>