Bootstrap 可視化HTML編輯器，summernote(2)

####1、布局div

<div class="summernote" name="description" placeholder="請對項目進行詳細的描述，使更多的人了解你的" action="${ctx}/file">${deal.description}</div>

1

相信你也看到了我為div加上的三個屬性name、placeholder、action，那麼我們來詳細介紹一下三個屬性的作用：

name，為外層form表單提供summernote資料儲存時的資料模型的屬性名，和input标簽的name屬性作用一緻，稍候在form送出的時候具體介紹。

placeholder，很直白，為summernote提供初始狀态的文本描述，當然還需要後續加工，div顯然是不支援placeholder屬性的。

action，為圖檔上傳提供後端接收位址，稍候在介紹圖檔上傳onImageUpload會再次用到。

另外${deal.description}其實你不需要太多關注，和textarea的指派的用法一緻，就是單純的顯示儲存後的内容。

####2、summernote初始化

$('div.summernote').each(function() {
  var $this = $(this);
  var placeholder = $this.attr("placeholder") || '';
  var url = $this.attr("action") || '';
  $this.summernote({
    lang : 'zh-CN',
    placeholder : placeholder,
    minHeight : 300,
    dialogsFade : true,// Add fade effect on dialogs
    dialogsInBody : true,// Dialogs can be placed in body, not in
    // summernote.
    disableDragAndDrop : false,// default false You can disable drag
    // and drop
  });
    });      

使用jquery擷取到頁面上的summernote，對其進行初始化，我們來詳細介紹列出參數的用法（先不介紹圖檔上傳的onImageUpload 方法）。

lang ，指定語言為中文簡體

placeholder ，summernote初始化顯示的内容。

minHeight，最小高度為300，注意這裡沒有使用height，是有原因的，這裡稍作解釋，就不上圖了。當使用height指定高度後，假如上傳比height高的圖檔，summernote就不會自動調整高度，并且前文中“效果圖3”中标出的紅色區域會不貼着圖檔，而溢出到summernote外部。

dialogsFade，增加summernote上彈出視窗滑進滑出的動态效果。

dialogsInBody，這個屬性也很關鍵，預設為false，字面上的意思是summernote的彈出框是否在body中（in嘛），設定為false時，dialog的式樣會繼承其上一級外部（如上文中的form-horizontal）容器式樣，那麼顯示的效果就很别扭，這裡也不再上圖；那麼設定為true時，就不會繼承上一級外部div的屬性啦，從屬于body嘛。

disableDragAndDrop，設定為false吧，有的時候拖拽會出點問題，你可實踐。

###②、summernote從本地上傳圖檔方法

####1、前端onImageUpload方法

假如問度娘如下的話：“onImageUpload方法怎麼寫？”，度娘大多會為你找到如下回答：

$(\'.summernote\').summernote({
    height:300,
    onImageUpload: function(files, editor, welEditable) {
     sendFile(files[0],editor,welEditable);
    }
   });
 });
function sendFile(file, editor, welEditable) {
    data = new FormData();
    data.append("file", file);
    url = "http://localhost/spichlerz/uploads";
    $.ajax({
        data: data,
        type: "POST",
        url: url,
        cache: false,
        contentType: false,
        processData: false,
        success: function (url) {
            editor.insertImage(welEditable, url);
        }
    });
}
</script>      

以上資源來自于stackoverflow。

但其實呢，summernote-develop版本的summernote已經不支援這種onImageUpload寫法，那麼如今的寫法是什麼樣子呢？參照summernote的官網例子。

onImageUpload
Override image upload handler(default: base64 dataURL on IMG tag). You can upload image to server or AWS S3: more…
// onImageUpload callback
$('#summernote').summernote({
  callbacks: {
    onImageUpload: function(files) {
      // upload image to server and create imgNode...
      $summernote.summernote('insertNode', imgNode);
    }
  }
});
// summernote.image.upload
$('#summernote').on('summernote.image.upload', function(we, files) {
  // upload image to server and create imgNode...
  $summernote.summernote('insertNode', imgNode);
});      

那麼此時onImageUpload的具體寫法呢？（後端為springMVC）：

callbacks : {
    // onImageUpload的參數為files，summernote支援選擇多張圖檔
    onImageUpload : function(files) {
        var $files = $(files);
        
        // 通過each方法周遊每一個file
        $files.each(function() {
            var file = this;
            // FormData，新的form表單封裝，具體可百度，但其實用法很簡單，如下
            var data = new FormData();
            
            // 将檔案加入到file中，後端可獲得到參數名為“file”
            data.append("file", file);

            // ajax上傳
            $.ajax({
                data : data,
                type : "POST",
                url : url,// div上的action
                cache : false,
                contentType : false,
                processData : false,
                
                // 成功時調用方法，後端傳回json資料
                success : function(response) {
                    // 封裝的eval方法，可百度
                    var json = YUNM.jsonEval(response);
                    
                    // 控制台輸出傳回資料
                    YUNM.debug(json);
                    
                    // 封裝方法，主要是顯示錯誤提示資訊
                    YUNM.ajaxDone(json);

                    // 狀态ok時
                    if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) {
                        // 檔案不為空
                        if (json[YUNM.keys.result]) {
                            
                            // 擷取背景資料儲存的圖檔完整路徑
                            var imageUrl = json[YUNM.keys.result].completeSavePath;
                            
                            // 插入到summernote
                            $this.summernote('insertImage', imageUrl, function($image) {
                                // todo，後續可以對image對象增加新的css式樣等等，這裡預設
                            });
                        }
                    }

                },
                // ajax請求失敗時處理
                error : YUNM.ajaxError
            });
        });
    }
}