summernote 上傳檔案處理

summernote是個很輕量的編輯器，往常都使用CKEditor來提供服務，不過青菜蘿蔔各有所好...其中最常調整的莫過於檔案上傳處理，備忘一下囉...

HTML Header
include id_summernote.css & id_summernote.js
#語系要更換的話，得多include該文本 summernote-zh-TW.js

只需要將DIV放置在愈顯示處
HTML:
<div id="id_summernote" class="summernote"></div>

如果上傳檔案不特別處理的話，預設式以Base64編碼方式存放於編輯區中，這樣存入資料庫將會大大的增加儲存量，於未來存取時可能耗費更多伺服器資源。改成存放圖檔於伺服器中，這樣瀏覽上路由器/交換器/瀏覽器都可能暫存該圖檔資源，而減輕WEB SERVER吞吐頻寬負擔。

JavaScript
<script type="text/javascript">
jQuery(document).ready(function() {
      //載入
              initEditor();
});

  /* 編輯器初始化 */
  function initEditor() {
    $('.summernote').summernote({
        lang: 'zh-TW',       // default: 'en-US'
        toolbar: [
                ["style", ["style"]],
                ["font", ["bold", 'italic', "underline", "clear"]],
                ["fontname", ["fontname"]],
                ['fontsize', ['fontsize']],
    ["color", ["color"]],
                ["para", ["ul", "ol", "paragraph"]],
                ["table", ["table"]],
                ["insert", ["link", "picture", "video", "hr"]],
                ['height', ['height']],
                ["view", ["fullscreen", "codeview", "undo", "redo", "help"]]
            ],
        height: 200,         // set editor height             
        minHeight: null,    // set minimum height of editor
        maxHeight: null,    // set maximum height of editor
        focus: true,         // set focus to editable area after initializing summe
        tabsize: 2,
            dialogsInBody: true,
        callbacks: {
            onImageUpload: function (files) { //the onImageUpload API
                img = sendFile(files[0], $(this));
            }
        }
     
    });  
  }  
  function sendFile(file, editor) {
            data = new FormData();
            data.append("upload", file);         
            $.ajax({
                data: data,
                type: "POST",
                url: "<?=site_url('controler/function'); ?>",
                cache: false,
                contentType: false,
                processData: false,
                success: function (datas) {
                    var data = $.parseJSON(datas);
                    if (data.uploaded == '1')
                      // the insertImage API
                      editor.summernote('insertImage', data.url, 'image name');
                    else
                      console.log(data.error);
                },
error:function(data){
      console.log(data);
}
            });
      }

</script>

至於回傳的資料中，透過JSON編碼方式回傳，這樣有利於處理檔案儲存狀態的追蹤處理。