Aunque summernote.js puede generar fácilmente código html de contenido de cuadro de texto enriquecido, su método de inserción de imágenes es muy parecido al ginkgo (tóxico). Utiliza los datos de la imagen completa como el valor del atributo img _-> src e inserta uno más grande. Imagen Es posible que la longitud de nuestros datos de mysql no sea suficiente para la
operación de Heli: el valor del atributo src debe ser una URL,
para esto necesitamos reescribir su método de carga de imágenes.
A continuación se muestra mi código
<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>