1.上传图片至本身的服务器（这个官方都有例子，重点引见附件上传）
图片上传官方网址
// onChange callback
$('#summernote').summernote({
callbacks: {
onChange: function(contents, $editable) {
console.log('onChange:', contents, $editable);
}
}
});
// summernote.change
$('#summernote').on('summernote.change', function(we, contents, $editable) {
console.log('summernote\'s content is changed.');
})summernote是一款富文本编辑器，然则他上传的图片的时刻，图片会以二进制的情势存入数据库字段中，这时刻就很占资本，所以我们愿望图片能存入本身的服务器，在字段中就以链接地点的情势寄存，这时刻就需要在上传图片的时刻举行处置惩罚，所以callbacks下面的onImageUpload举行图片文件的处置惩罚。
示例：
//初始化定义
var _this=this;
this.curEle=$('#'+this.id);
var fileUploadBtn=this.template;
this.curEle.summernote({
focus: true,
lang:'zh-CN', //中文申明设置
placeholder:'请输入内容',
fontNames: ['宋体','微软雅黑','楷体','黑体','隶书', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',
'Tahoma', 'Times New Roman', 'Verdana'],
height:400,
minHeight:300,
maxHeight:null,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph','height']],
['table', ['table']],
['insert', ['fileBtn','media', 'link', 'picture', 'video']],
['view', ['fullscreen']]
],
buttons: {
fileBtn: fileUploadBtn
},
callbacks: {
onImageUpload: function (files,editor, $editable) {
_this.sendFile(files[0]);
}，
}
})methods:{
sendFile(files){
var _this=this;
var data = new FormData();
data.append("file", files);
$.ajax({
data : data,
type : "POST",
url : SERVICE_URLS.commonUrl.uploadPic.path, //此处为图片上传服务器要求地点，返回的是图片上传后的途径（比方：要求接口为http://120.96.35.20:8090/uploadPic）
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {//举例data:{data:'http://www.test.com/a.jpg'}
_this.curEle.summernote('insertImage', data.data);
},
error:function(){
alert("上传失利");
}
});
},
template(context){ //此处为自定义附件上传按钮，假如只斟酌图片上传请疏忽
let _this=this;
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: '<i /> 附件',
tooltip: '文件上传',
click: function () {
_this.visibleUpload=true; //掌握上传文件界面框可见性
setTimeout(function(){
_this.initUploader(); //初始化web uploader插件
},0)
}
});
return button.render(); // return button as jquery object
}
}2.自定义建立附件按钮，上传至本身服务器。
起首引见github上已存在的附件插件
uploadcare-summernotegithub链接地点
这是Summernote WYSIWYG编辑器的Uploadcare插件。它许可您的用户从当地装备，交际收集，云存储上传文件和图象，而无需处置惩罚上传所需的任何后端代码。这句话意味着你上传的文件存储的位置不在你本身的服务器上。
固然插件供应了定制存储，有兴致的能够本身尝试。综合斟酌插件的要领有点烦琐不安全，不如本身写个附件上传按钮。
示比方下
(1)建立本身的附件上传按钮 自定义按钮, 如上template函数所示：
(2)上传附件，此处用百度的web uploader插件，详细代码不在细讲（可看web uploader API）
(3)依据返回的数据，动态建立DOM插进去到summerNote编辑器中。
这里重点说一下思绪：
1.应用插件将当地文件上传到我们的服务器
2.当上传完成后（uploadFinished），我们可依据胜利返回的数据,动态的建立DOM对象。
3.将建立好的DOM对象，再插进去到编辑器中
(注重：这里不必insertNode要领,由于他会分外的<p><br></p>标签–详细检察issue，别的当拔取当地文件的时刻，此时的富文本编辑器会落空核心，插进去新的node节点的时刻，老是从起始点最先插进去，而非从当前光标的位置举行插进去。所以尝试换种要领，应用设置code从新置换全部编辑框的内容。)
initUploader(){
var _this=this;
var $list=$('#uploadList');
var state='pending';
var $btn=$('#toServerBtn');
var uploader = WebUploader.create({
swf: 'https://cdn.bootcss.com/webuploader/0.1.1/Uploader.swf',
server: SERVICE_URLS.commonUrl.uploadFile.path, //本身服务器的文件上传接口
pick: '#fileUpload',
resize: false,
fileNumLimit: 10,
fileSizeLimit: 10 * 1024 * 1024,
});
this.uploader=uploader;
// 当有文件被添加进行列的时刻
uploader.on( 'fileQueued', function( file ) {
$list.append( '<li id="' + file.id + '" class="fileItem">' +
'<p class="uploadInfo ellipsis">' + file.name + '</p>' +
'<div class="stateBox">' +
'<p class="uploadState">守候上传</p>' +
'<p class="cancelFile" attr="' + file.id + '" >作废上传</p>' +
'</div>'+
'<div class="progress">' +
'<div class="progress-bar"></div>' +
'</div>'+
'</li>' );
if(file){
_this.ifFileQueue=true;
}
});
$list.on('click','.stateBox .cancelFile',function(event){
var target=event.target.getAttribute('attr');
uploader.removeFile( target,true );
$('#'+target).remove();
var status=uploader.getStats();
if(status.queueNum==0){
_this.ifFileQueue=false
}else{
_this.ifFileQueue=true;
}
})
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 防止反复建立
if ( !$percent.length ) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo( $li ).find('.progress-bar');
}
$li.find('p.uploadState').text('上传中');
$percent.css( 'width', percentage * 100 + '%' );
});
uploader.on( 'uploadSuccess', function( file,response ) {
$( '#'+file.id ).find('p.uploadState').text('已上传');
_this.$set( _this.fileList,_this.fileList.length,response.result[0])
});
uploader.on( 'uploadError', function( file ) {
$( '#'+file.id ).find('p.uploadState').text('上传失足');
});
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').fadeOut();
});
uploader.on('uploadFinished',function(){ //重点在这里
var str=``;
for (var i = 0; i < _this.fileList.length; i++) {
var item = _this.fileList[i];
str+=`<p><a href="${item.fileUrl}" download="${item.fileName}">${item.fileName}</a></p>`;
}
var storageCode=_this.curEle.summernote('code');
_this.curEle.summernote('reset');
var node=$("<div>"+storageCode+str+"</div>")[0];
// _this.curEle.summernote('insertNode',node); //此处不必insertNode
_this.curEle.summernote('code',node);
setTimeout(()=>{
_this.visibleUpload=false;
},1000)
});
uploader.on( 'all', function( type ) {
if ( type === 'startUpload' ) {
state = 'uploading';
} else if ( type === 'stopUpload' ) {
state = 'paused';
} else if ( type === 'uploadFinished' ) {
state = 'done';
}
if ( state === 'uploading' ) {
$btn.text('停息上传');
} else {
$btn.text('最先上传');
}
});
$btn.on( 'click', function() {
if ( state === 'uploading' ) {
uploader.stop();
} else {
uploader.upload();
}
});
},
代码没有写全，只是供应思绪。
