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 : monUrl.uploadPic.path, //此处为图片上传服务器请求地址，返回的是图片上传后的路径(例如：请求接口为http://120.96.35.20:8090/uploadPic)
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {//举例data:{data:'/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: '附件',
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方法,因为他会额外的
initUploader(){
var _this=this;
var $list=$('#uploadList');
var state='pending';
var $btn=$('#toServerBtn');
var uploader = WebUploader.create({
swf: '/webuploader/0.1.1/Uploader.swf',
server: monUrl.uploadFile.path, //自己服务器的文件上传接口
pick: '#fileUpload',
resize: false,
fileNumLimit: 10,
fileSizeLimit: 10 * 1024 * 1024,
});
this.uploader=uploader;
// 当有文件被添加进队列的时候
uploader.on( 'fileQueued', function( file ) {
$list.append( '
' +
'
' + file.name + '
' +
'
' +
'
等待上传
' +
'
取消上传
' +
'
'+
'
' +
'
'
'+
'
' );
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 = $('
' +
'
' +
'
' +
'
').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+=`
${item.fileName}
`;
}
var storageCode=_this.curEle.summernote('code');
_this.curEle.summernote('reset');
var node=$("
"+storageCode+str+" ")[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();
}
});
},
代码没有写全，只是提供思路。
上传文件到自己建的服务器 summernote(富文本编辑器)将附件与图片上传到自己的服务器（vue项目）...
