解决summernote富文本编辑器粘贴会出现两张图片

最新推荐文章于 2025-12-20 00:21:37 发布

原创最新推荐文章于 2025-12-20 00:21:37 发布 · 518 阅读

0 ·

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

GEO检测

本文描述了如何修复Summernote富文本编辑器在火狐和谷歌浏览器上粘贴图片重复的问题，通过调整初始化设置和使用onPaste回调函数实现。

项目中引用了summernote富文本编辑器，可能是因为版本过低，所以使用火狐和谷歌浏览器都会出现粘贴图片会重复，明明只粘贴一次但是出现了两张图片，效果大致如图:

搜了好多资料都是改的js文件，但是我在老版本的js文件中并没有发现相关方法的定义和解释，尝试把方法写入但是并没有作用，最后参考了一篇文章解决了，具体代码如下:

$('.summernote').summernote({
    lang: 'zh-CN',
    placeholder: '请输入',
    toolbar: [
        [ 'style', [ 'style' ] ],
        [ 'font', [ 'bold', 'italic', 'strikethrough', 'superscript', 'subscript',         'clear'] ],
        [ 'fontname', [ 'fontname' ] ],
        [ 'fontsize', [ 'fontsize' ] ],
        [ 'para', [ 'ol', 'ul', 'paragraph', 'height' ] ],
        [ 'view', [ 'undo', 'redo', 'fullscreen' ] ]
    ],
    minHeight:300,
    callbacks: {
        //解决粘贴会出现两张图片
        onPaste:function (ne){
            var _clipboardData = (ne. originalEvent || ne).clipboardData ||                                     window.clipboardData;
            var bufferHtml = _clipboardData.getData('text/html');
            var bufferText = _clipboardData.getData( 'text/plain');
            ne. preventDefault ? ne. preventDefault():(ne.returnValue = false)
            if (bufferHtml ==""){
                document.execCommand(" bufferText",false,bufferText)
            }else{
                document.execCommand("insertHTML",false,bufferHtml)
            }
        }
    }
});
$('.summernote').summernote('code', markupStr);