1、遇到最大的坑是,引用summernote.js和summernote.min.js的坑,因為調用不同的js,寫的方法完全不同,所以經常會造成報錯和方法無效的情況,以下是我通過實際開發環境總結的:
2、上傳圖片的坑,編輯器默認會把圖片轉換為二進制,性能會有很大的問題,解決辦法如下:
先寫一個異步上傳圖片的方法:
function sendFile(files,editor,welEditable) { var data = new FormData(); data.append("fileObj", files[0]); data.append("type", "img"); $.ajax({ data : data, type : "POST", url : ctx + "sys/file/util/upload", // 圖片上傳出來的url,返回的是圖片上傳后的路徑,http格式 cache : false, contentType : false, processData : false, //dataType : "json", success: function(data) {//data是返回的hash,key之類的值,key是定義的文件名 $('.summernote').summernote('insertImage', data.fileService + data.imgUrl); }, error:function(){ alert("上傳失敗"); } }); }
然后在初始化編輯器的時候寫上傳圖片回調方法,這里因為引用summernote.js和summernote.min.js寫法不同。
1)引用summernote.js的寫法:
$('.summernote').summernote({ height : '220px', lang : 'zh-CN', callbacks:{//回調函數,重寫onImageUpload方法,用於圖片上傳 onImageUpload: function(files, editor, welEditable) { sendFile(files,editor,welEditable); } } });
2)引用summernote.min.js的寫法:
$('.summernote').summernote({ height : '220px', lang : 'zh-CN', onImageUpload: function(files, editor, welEditable) {//圖片上傳 sendFile(files,editor,welEditable); } });