Although summernote.js can easily generate rich text box content html code, its image insertion method is very ginkgo-like (toxic). It uses the data of the entire image as the img_->src attribute value and inserts a larger one. Picture Our mysql data length may not be enough for
Heli operation: The src attribute value should be a url,
for this we need to rewrite his picture upload method.
Below is my code
<style>
.m{ width: 800px; margin-left: auto; margin-right: auto; }
</style>
<script>
<!--jquery入口函数-->
$(function(){
//重写summernote.js图片上传回调函数
$('#summernote').summernote({
height: 600,
tabsize: 2,
lang: 'zh-CN',
//重写的图片上传回调函数
callbacks: {
// onImageUpload callback
onImageUpload: function(files) {
// upload image to server and create imgNode...
var data = new FormData();
data.append("file", files[0]);
//通过ajax异步请求访问图片上传服务器，并替换img src属性地址
$.ajax({
data : data,
type : "POST",
url : IMG_UPLOAD_URL,
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(res) {
//调用插入图片的方法,summernote(插入图片方法名,url,img标签名)
$('#summernote').summernote('insertImage',JSON.parse(res.data).img_url,'img');
},
error:function(){
alert("上传失败");
}
});
}
}
});
//富文本框查看生成html代码按钮
$("#test").click(function () {
// 获取富文本框内容
alert($('#summernote').summernote('code'));
})
});
</script>
</head>
<body>
<div class="m">
<div id="summernote"></div>
</div>
<!--富文本框查看生成html代码按钮-->
<input type="button" value="test" id="test">
</body>