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: ' 附件', tooltip: '文件上传', click: function () { _this.visibleUpload=true; //控制上传文件界面框可见性 setTimeout(function(){ _this.initUploader(); //初始化web uploader插件 },0) } }); return button.render(); // return button as jquery object }} 2.自定义创建附件按钮，上传至自己服务器。
首先介绍github上已经存在的附件插件
uploadcare-summernote这是Summernote WYSIWYG编辑器的Uploadcare插件。它允许您的用户从本地设备，社交网络，云存储上传文件和图像，而无需处理上传所需的任何后端代码。这句话意味着你上传的文件存储的位置不在你自己的服务器上。
当然插件提供了，有兴趣的可以自己尝试。综合考虑插件的方法有点繁琐不安全，不如自己写个附件上传按钮。示例如下
(1)创建自己的附件上传按钮 , 如上template函数所示：
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( '' + file.name + '
' + ' ' + '
'+ ' 等待上传
' + '取消上传
' + ' ' + ' ' + '
'+ ' ' + ' ' + '
').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+=``; } 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(); } }); }, 
代码没有写全，只是提供思路。