在Summernote编辑器中粘贴纯文本内容

Question

我需要在Summernote编辑器中复制粘贴一些内容。但是当我粘贴时，它会带有我复制内容所在页面的样式。我需要以纯文本形式粘贴。有什么解决办法吗？

- Revathy kr

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 指出（如果这部分有帮助，请点赞他的回答！）

简而言之：这是一个功能性的 演示

- jcuenod

---

是的，它正常工作了！！问题应该是在 summernote.min.js 文件上。我猜我使用的是以前的版本。当我使用演示中提供的文件时，问题得到解决了！！ - Revathy kr

跟进：好的，几乎可以了...我尝试的每个文本字符串的第一段都会得到一个<span>标签。之后就都是正常的了。@jcuenod - nclsvh

如果您使用的是6.0至6.4版本，则需要使用onpaste而不是onPaste。6.5版本修复了此问题。 - Ross Lote

我目前使用的是版本0.8.4，发现在行之间出现了一些格式问题，有额外的空格？上面的解决方案似乎在IE中无效。是否有另一个可行的解决方法？ - logan gilley

关于工作演示（»TL;DR：这是一个功能演示«）：确实，它可以防止文本格式，例如内联样式。然而 - 我可以从剪贴板粘贴图像，然后将其作为base64编码的内联数据包含在其中。这很不幸。我该如何防止这种情况发生？ - GerZah

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

- Mathieu Castets

---

截至今天的测试结果显示，在Firefox和Safari浏览器上正常工作。在Chrome浏览器上也可以正常工作，但是使用e.preventDefault()方法无法阻止粘贴图片内容，即使bufferText.length == 0。 - Someone Special

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

- Theo

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

- Tom Glover

---

这似乎正是我所需要的，您能否给我一些关于如何使用它或在Django中实现上述代码的提示？链接到问题。 - Mike Vlad

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

- Prosanta Chaki

Answer 6

富文本编辑器的onPaste功能不完美，我们需要同时干预纯文本粘贴和HTML粘贴（pasteHTML）。我们需要将剪贴板数据中的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);
    }
}

- Tien Dang