summernote(富文本编辑器)将附件与图片上传到本身的服务器（vue项目）

时间 2019-11-11

标签 summernote 文本编辑器附件图片上传本身服务器 vue 项目繁體版

原文原文链接

1.上传图片至本身的服务器（这个官方都有例子，重点介绍附件上传）
图片上传官方网址css

// 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进行图片文件的处理。
示例：node

//初始化定义
        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.自定义建立附件按钮，上传至本身服务器。jquery

首先介绍github上已经存在的附件插件
uploadcare-summernotegithub连接地址git

这是Summernote WYSIWYG编辑器的Uploadcare插件。它容许您的用户从本地设备，社交网络，云存储上传文件和图像，而无需处理上传所需的任何后端代码。这句话意味着你上传的文件存储的位置不在你本身的服务器上。
固然插件提供了定制存储，有兴趣的能够本身尝试。综合考虑插件的方法有点繁琐不安全，不如本身写个附件上传按钮。github

示例以下
(1)建立本身的附件上传按钮自定义按钮, 如上template函数所示：web

(2)上传附件，此处用百度的web uploader插件，具体代码不在细讲（可看web uploader API）
(3)根据返回的数据，动态建立DOM插入到summerNote编辑器中。
这里重点说一下思路：
1.利用插件将本地文件上传到咱们的服务器
2.当上传完成后（uploadFinished），咱们可根据成功返回的数据,动态的建立DOM对象。
3.将建立好的DOM对象，再插入到编辑器中
(注意：这里不用insertNode方法,由于他会额外的<p><br></p>标签--具体查看issue，另外当选取本地文件的时候，此时的富文本编辑器会失去焦点，插入新的node节点的时候，老是从起始点开始插入，而非从当前光标的位置进行插入。因此尝试换种方法，利用设置code从新置换整个编辑框的内容。)ajax

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();
            }
          });
        },

代码没有写全，只是提供思路。数据库