summernote粘贴图片异常

最新推荐文章于 2024-07-27 18:02:33 发布

原创最新推荐文章于 2024-07-27 18:02:33 发布 · 1.2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍在Summernote v0.8.12中遇到的图片粘贴异常问题，详细解释了两种解决方法：一是修改createImage函数代码，二是升级至最新版本v0.8.18。经验证，谷歌浏览器下仅出现此问题。

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("图片上传失败。");
                }
            });
        }
    }
});

异常现象

当粘贴图片到summernote编辑器时, 居然会自动多粘贴一张 summernote 版本 v0.8.12
在这里插入图片描述

解决方法

方法一

找到 summernote.js文件
搜索 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();
  }

问题解决

方法二

我使用的summernote版本是 v0.8.12, 尝试火狐, IE, 谷歌浏览器, 只有谷歌浏览器会出现这个问题!!!, 不可思议.
第二种方法就是使用最新版本summernote, 现在是 v0.8.18, 亲测正常
summernote官方下载地址
 百度网盘下载提取码: kvzk