summernote中關於上傳圖片的問題（解決）

背景

最近在寫學校的數據結構平臺重構，有一塊地方要用到summernote編輯器，而且編輯框裏面是要插入圖片的，summernote默認插入圖片後會轉爲base64數據，存到數據庫的話對數據庫負擔很大，試過直接存圖片，普通的text字段頂多存兩張圖片，因爲text字段長度是64kb，而且學長給我的需求是把編輯框裏的圖片存到服務器。

過程

第一次接觸summernote嘛當然是去百度搜索怎麼玩了，網上的各種博客都說summernote在編輯框裏上傳圖片的話都需要用到回調函數callbacks中的onImageUpload。類似於：

$("#context").summernote({
        height: 200,
        minHeight: 200,
        maxHeight: 200,
        lang: 'zh-CN',
		callbacks: {
	    		    onImageUpload: function (files) {
	            		 uploadFile($summernote, files[0]);
	        		}
	   		 }
    });

我仿照寫了一下，確發現無論是粘貼圖片進去還是用自帶的圖片按鈕上傳進去，都進入不到這個回調函數裏面，而後又去官方文檔裏查，官方文檔（https://summernote.org/deep-dive/） 裏也是這麼個寫法，搞不懂爲什麼，各種嘗試也做過了，最後無意間在github（https://github.com/summernote/summernote/issues/72） 裏看到了另一種寫法：

function loadSummernote() {
	$("#context").summernote({
        height: 200,
        minHeight: 200,
        maxHeight: 200,
        lang: 'zh-CN',
        onImageUpload: function(files, editor, $editable) {
            uploadSummerPic(files[0], editor, $editable);
        }
    });
}

function uploadSummerPic(file, editor, $editable) {
    var fd = new FormData();
    fd.append("file", file);
    $.ajax({
        type:"POST",
        url:"/pic/uploadSummerPic",
        data: fd,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            editor.insertImage($editable, data.url);
        }
    });
}

至此，終於解決了這個問題，但是至今不知道爲什麼寫在callbacks裏反而調用不了onImageUpload。
遇到的其他坑：insertImage中data.url因爲是存到的本地路徑，故需要是 http://(ip)+路徑 才能正確的在編輯器中顯示圖片，其實可以點擊編輯器上邊的轉換爲源碼來查看在編輯器裏存放的html具體是什麼樣子的。