1、先引入summernote的CSS及JS的文件
summernote的下载地址:https://summernote.org/
summernote的官方文档:https://summernote.org/deep-dive/
2、在body中添加一个div:
<div id="eg" class="summernote"></div>
3、在js中初始化该组件:
$('.summernote').summernote({
height : '220px',
lang : 'zh-CN'
});
取值:$("#eg").summernote('code');
4、还可以在添加一些其他的组件:
toolbar: [
['hr':['hr']],// 插入水平线
['style':['bold', 'italic', 'underline', 'clear']], // 字体样式
5、回调函数:
callback:{
onImageUpload:function(file){
$.ajax({
type:'post',
url:'请求后台地址',
cache: false,
data:formData,
processData: false,
contentType: false,
dataType:'text', //请求成功后,后台返回图片访问地址字符串,故此以text格式获取,而不是json格式
success: function(picture) {
$('#summernote').summernote('insertImage',picture);
},
error:function(){
alert("上传失败");
}
});
}
}