summernote的使用

summernote = $('#summernote').summernote({
    lang: 'zh-CN',
    focus: true,
    callbacks: {
        onChange: function (contents, $edittable) {
            // 內容變化時的響應事件
        },
        // 上傳圖片
        onImageUpload: function (files) {
            var obj = this;
            var data = new FormData();
            data.append("file", files[0]);
            $.ajax({
                type: "post",
                url: ctx + "common/upload",  // 上傳圖片的介面
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function (result) {
                    if (result.code == web_status.SUCCESS) {
                        $('#' + obj.id).summernote('insertImage', result.url);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error: function (error) {
                    $.modal.alertWarning("圖片上傳失敗。");
                }
            });
        }
    }
});
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34

異常現象

當貼上圖片到summernote編輯器時, 居然會自動多貼上一張summernote 版本 v0.8.12

解決方法

方法一

1. 找到summernote.js檔案
2. 搜尋createImage(url), 修改為如下程式碼

function createImage(url) {
      return $$1.Deferred(function (deferred) {
          var $img = $$1('<img>');

          /** 開啟後, 谷歌瀏覽器會出現貼上圖片異常
          $img.one('load', function () {
              $img.off('error abort');
              deferred.resolve($img);
          }).one('error abort', function () {
              $img.off('load').detach();
              deferred.reject($img);
          });
           */

          $img.css({
              display: 'none'
          }).appendTo(document.body).attr('src', url);
      }).promise();
  }
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

3. 問題解決
   

方法二

我使用的summernote版本是v0.8.12, 嘗試火狐, IE, 谷歌瀏覽器, 只有谷歌瀏覽器會出現這個問題!!!, 不可思議.
第二種方法就是使用最新版本summernote, 現在是v0.8.18, 親測正常
summernote官方下載地址
百度網盤下載提取碼: kvzk