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

Question

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

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 可能仍然存在问题。 如果是这样，请将document.execCommand包装在计时器函数中以稍微延迟其执行：

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

v0.7.0+ 的更新

选项中回调的位置在 v0.7.0 之后更改
在 v0.7.0 之后，每个回调都应该被回调对象包裹。 （资源）

这意味着原始代码应该写成

$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：这是一个功能演示

Answer 2

在 v0.7.0 之后，每个回调都应该被回调对象包裹。 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

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 4

设法为 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 5

就我而言，上述所有解决方案均无效。 通过使用我找到的解决方案，这对我有用。

 $('#title').on('summernote.paste', function(e, ne) {
      var bufferText = ((ne.originalEvent || ne).clipboardData || window.clipboardData).getData('Text');
      ne.preventDefault();
      bufferText = bufferText.replace(/\r?\n/g, '<br>');
      document.execCommand('insertHtml', false, bufferText);
  })

Answer 6

富文本编辑器的 onPaste 无法正常工作，我们需要干预纯文本粘贴和粘贴 (pasteHTML)，我们需要从剪贴板数据 html 中删除 html 和 body 标签，并用 span 标签包裹它们

onPaste = (e) => {
    const clipboardData = ((e.originalEvent || e).clipboardData || window.clipboardData);
    const isPlainTextPasting = !clipboardData.types.includes("text/html");

    if (isPlainTextPasting) {
        let bufferText = clipboardData.getData("Text").replace(/\r?\n/g, '<br>');
        const blocksFromHTML = stateFromHTML(bufferText);

        // ignore default paste, only apply for plain text paste
        e.preventDefault();

        setTimeout(() => {
            const html = stateToHTML(blocksFromHTML);
            this.editor.summernote('pasteHTML', html);
        }, 10);
    }
    else {
        let bufferText = clipboardData.getData("text/html")

        // ignore default paste, only apply for plain text paste
        e.preventDefault();

        setTimeout(() => {
            const html = bufferText.replace(/^<html>\r?\n<body>\r?\n/, "")
                .replace(/\r?\n<\/body>\r?\n<\/html>$/, "")
            this.editor.summernote('pasteHTML', `<span>${html}</span>`);
        }, 10);
    }
}

Answer 7

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