在 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 问题：

您在使用 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 回调效果很好，但我在不同浏览器中对换行符的不同处理上遇到了问题。所以我想出了以下解决方案，它使用 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 进行了可怕的破解。遗憾的是，这也需要用户的粘贴许可。如果有人提出更好的建议，我会洗耳恭听。

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)，我们需要从 ClipboardData html 中删除 html 和 body 标签，并用 span 标签包裹它们

import {stateFromHTML} from 'draft-js-import-html';

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);
    }
}