国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

summernote(富文本編輯器)將附件與圖片上傳到自己的服務器（vue項目）

wqj97 / 3744人閱讀

摘要：將創建好的對象，再插入到編輯器中注意這里不用方法因為他會額外的標簽具體查看，另外當選取本地文件的時候，此時的富文本編輯器會失去焦點，插入新的節點的時候，總是從起始點開始插入，而非從當前光標的位置進行插入。

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-summernotegithub鏈接地址

這是Summernote WYSIWYG編輯器的Uploadcare插件。它允許您的用戶從本地設備，社交網絡，云存儲上傳文件和圖像，而無需處理上傳所需的任何后端代碼。這句話意味著你上傳的文件存儲的位置不在你自己的服務器上。
當然插件提供了定制存儲，有興趣的可以自己嘗試。綜合考慮插件的方法有點繁瑣不安全，不如自己寫個附件上傳按鈕。

示例如下
(1)創建自己的附件上傳按鈕 自定義按鈕, 如上template函數所示：


(2)上傳附件，此處用百度的web uploader插件，具體代碼不在細講（可看web uploader API）
(3)根據返回的數據，動態創建DOM插入到summerNote編輯器中。
這里重點說一下思路：
1.利用插件將本地文件上傳到我們的服務器
2.當上傳完成后（uploadFinished），我們可根據成功返回的數據,動態的創建DOM對象。
3.將創建好的DOM對象，再插入到編輯器中
(注意：這里不用insertNode方法,因為他會額外的


標簽--具體查看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( "
  • " +
              "
    " + 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();
            }
          });
        },

    代碼沒有寫全，只是提供思路。

    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

    轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53305.html

    相關文章

    • summernote(富文本編輯器)將附件與圖片上傳到自己的服務器（vue項目）

      摘要：將創建好的對象，再插入到編輯器中注意這里不用方法因為他會額外的標簽具體查看，另外當選取本地文件的時候，此時的富文本編輯器會失去焦點，插入新的節點的時候，總是從起始點開始插入，而非從當前光標的位置進行插入。 1.上傳圖片至自己的服務器（這個官方都有例子，重點介紹附件上傳）圖片上傳官方網址 // onChange callback $(#summernote).summernote({ ...

      xiaoxiaozi 評論0 收藏0

    • 基于SpringBoot的仿微信掃描登陸+輕量級富文本編輯->文章系統

      摘要：微信的掃碼的登陸是要企業號的，對于一個學生狗哪來企業號，自己有個測試號內心已十分滿足。自己決心做一個仿微信掃碼登陸，對，你沒看錯，就是仿，堅信高仿出奇跡。 前言 點擊訪問項目鏈接看到慕課網和segmentfault的發表手記和發表文章是Markdown 編輯器，說實話，對于第一次用的我真的很不習慣。不過對于我們代碼開發者來寫挺好的，也就對我們這些開發者述寫自己的代碼故事好點而已。這邊我...

      MyFaith 評論0 收藏0

    • summernote編輯器插件使用筆記

      摘要：由于需要的編輯器功能比較簡單，不需要太多復雜功能，所以選擇了一款特別輕量的插件，而且后臺操作也很簡單。關于圖片上傳提交按鍵等回調函數也是在中，詳見部分。初始化一個編輯器很簡單。 這次項目中需要用到編輯器插件，于是上網查了一下。由于需要的編輯器功能比較簡單，不需要太多復雜功能，所以選擇了一款特別輕量的summernote插件，而且后臺操作也很簡單。官網：http://summernote...

      printempw 評論0 收藏0

    • 手摸手，帶你用vue擼后臺 系列三(實戰篇)

      摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

      Channe 評論0 收藏0

    • 手摸手，帶你用vue擼后臺 系列三(實戰篇)

      摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

      zgbgx 評論0 收藏0

    發表評論

    0條評論

    wqj97

    男|高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <