在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 元素时出现问题
如何在 C# 中将 HtmlEncode/HtmlDecode 转换为纯文本?