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