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