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

Posted

技术标签:

【中文标题】在summernote编辑器中将内容粘贴为纯文本【英文标题】:Paste content as plain text in summernote editor 【发布时间】:2015-09-08 17:22:51 【问题描述】:

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

【问题讨论】:

【参考方案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 之后,每个回调都应该被回调对象包裹。 (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

【讨论】:

我也试过了。但是 onpaste 事件没有触发。 更新成功了吗?我添加了一个功能演示(虽然它缺少一些第 3 方的东西)。 是的,它工作正常!!我猜是summernote.min.js文件有问题。我使用的是以前的版本。当我使用演示中给出的文件时,问题得到了修好了!! FOLLOWUP: 差不多...第一段(在我尝试的每个文本字符串上)都有一个<span> 标签。之后一切正常。 @jcuenod 如果您使用的是 6.0 到 6.4 版本,那么您需要 onpaste 而不是 onPaste。 6.5 版修复了这个问题。【参考方案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);
        
    
);

【讨论】:

截至今天测试,适用于 firefox 和 safari。也可以在 Chrome 上使用,但 chrome e.preventDefault() 不起作用,如果内容是图像,即使 bufferText.length == 0,它仍然会粘贴内容。【参考方案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

【讨论】:

这似乎正是我所需要的,你能给我一个关于如何使用它或在 Django 中在哪里实现上述代码的提示吗?链接到question【参考方案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);
        
      
    );

【讨论】:

【参考方案5】:

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

【讨论】:

以上是关于在summernote编辑器中将内容粘贴为纯文本的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Ajax 将 Summernote 文本从 JSON 数据转换为纯文本?

在更改事件中将文本附加到 Summernote 元素时出现问题

php 强制WordPress编辑器始终粘贴为纯文本。

如何在 C# 中将 HtmlEncode/HtmlDecode 转换为纯文本?

如何在 Tailwind 和 postcss 中将 Html 内容转换为纯文本

是否有将 HTML 转换为纯文本的功能?