在 summernote 编辑器中将内容粘贴为纯文本

Question

我需要在我的 summernote 编辑器中复制粘贴一些内容。但是当我粘贴时，它采用了我复制的页面的样式 it.I 需要将其粘贴为纯文本。有什么解决办法吗？

Answer 1

使用`onPaste`回调

使用 onPaste 选项定义一个回调，该回调将去除标签并手动插入文本。

$editor.summernote({
    onPaste: function (e) {
        var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
        e.preventDefault();
        document.execCommand('insertText', false, bufferText);
    }
});

来源：https://github.com/summernote/summernote/issues/303

解决 Firefox 问题：

您在使用 Firefox 时可能仍有问题。如果是这样，将 document.execCommand 包装在定时器函数中以稍微延迟其执行：

setTimeout(function(){
    document.execCommand( 'insertText', false, bufferText );
}, 10);

v0.7.0+更新

Position of callbacks in options is changed after v0.7.0
After v0.7.0, every callbacks should be wrapped by callbacks object. (source)

也就是说原代码应该写成

$editor.summernote({
    callbacks: {
        onPaste: function (e) {
            var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
            e.preventDefault();
            document.execCommand('insertText', false, bufferText);
        }
    }
});

感谢 Mathieu Castets 指出了这一点（因此，如果这一点有帮助，请为他的回答点赞！）

TL;DR: 这是一个函数 demo

Answer 2

After v0.7.0, every callbacks should be wrapped by callbacks object. http://summernote.org/deep-dive/#callbacks

因此，如果您使用 v0.7.0 或更高版本的 summernote，jcuenod 的答案现在可以重写为：

$('.summernote').summernote({
    callbacks: {
        onPaste: function (e) {
            var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');

            e.preventDefault();

            // Firefox fix
            setTimeout(function () {
                document.execCommand('insertText', false, bufferText);
            }, 10);
        }
    }
});

Answer 3

设法为 IE11 做了一个可怕的 hack 工作。遗憾的是，这也会请求用户的粘贴许可。如果有人想出更好的建议，我会洗耳恭听。

var trap = false;
$(document).ready(function () {
    $('#summernote').summernote({
        callbacks: {
            onPaste: function (e) {
                if (document.queryCommandSupported("insertText")) {
                    var text = $(e.currentTarget).html();
                    var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');

                    setTimeout(function () {
                        document.execCommand('insertText', false, bufferText);
                    }, 10);
                    e.preventDefault();
                } else { //IE
                    var text = window.clipboardData.getData("text")
                    if (trap) {
                        trap = false;
                    } else {
                        trap = true;
                        setTimeout(function () {
                            document.execCommand('paste', false, text);
                        }, 10);
                        e.preventDefault();
                    }
                }

            }
        }
    })
})

JSFiddle

Answer 4

onPaste-callback 效果很好，但我遇到了不同浏览器对换行符的不同处理方式的问题。所以我想出了以下解决方案，它使用 html-linebreaks:



    $(".htmleditor").summernote({
      callbacks: {
        // callback for pasting text only (no formatting)
        onPaste: function (e) {
          var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
          e.preventDefault();
          bufferText = bufferText.replace(/\r?\n/g, '<br>');
          document.execCommand('insertHtml', false, bufferText);
        }
      }
    });

Answer 5

ctrl+shift+V 是最简单的解决方案 :D

在 summernote 编辑器中将内容粘贴为纯文本

Paste content as plain text in summernote editor

html

javascript

summernote

使用`onPaste`回调

v0.7.0+更新

在 summernote 编辑器中将内容粘贴为纯文本

Paste content as plain text in summernote editor

html

javascript

summernote

使用onPaste回调

v0.7.0+更新

使用`onPaste`回调