我需要在我的summernote编辑器中复制粘贴一些内容。但是当我粘贴的时候,它会采用我复制它的页面的样式。我需要以纯文本的形式粘贴它。有什么解决办法吗?
pbpqsu0x1#
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封装在一个定时器函数中,稍微延迟它的执行:
document.execCommand
setTimeout(function(){ document.execCommand( 'insertText', false, bufferText ); }, 10);
v0.7.0之后更改了选项中回调的位置在v0.7.0之后,每个回调都应该由回调对象 Package 。(源代码)这意味着原始代码应编写为
$editor.summernote({ callbacks: { onPaste: function (e) { var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text'); e.preventDefault(); document.execCommand('insertText', false, bufferText); } } });
gwbalxhn2#
在v0.7.0之后,每个回调都应该由回调对象 Package 。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); } } });
rbpvctlc3#
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); } } });
x8goxv8g4#
设法使一个可怕的黑客工作的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
91zkwejq5#
在我的例子中,以上所有的解决方案都不起作用。通过使用这些解决方案,我找到了一个解决方案,这对我很有效。
$('#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); })
vvppvyoh6#
onPaste for Rich Text Editor无法完美工作,我们需要干扰以纯文本粘贴和粘贴(pasteHTML),我们需要从clipboardData html中删除html和body标记,并使用span标记将其 Package
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); } }
6条答案
按热度按时间pbpqsu0x1#
使用
onPaste
回调使用
onPaste
选项定义一个回调函数,该函数将去除标记并手动插入文本。贷方:https://github.com/summernote/summernote/issues/303
解决Firefox问题:
你可能仍然会遇到Firefox的问题,如果是这样的话,把
document.execCommand
封装在一个定时器函数中,稍微延迟它的执行:更新版本0.7.0 +
v0.7.0之后更改了选项中回调的位置
在v0.7.0之后,每个回调都应该由回调对象 Package 。(源代码)
这意味着原始代码应编写为
TL;DR:这是一个函数demo
gwbalxhn2#
在v0.7.0之后,每个回调都应该由回调对象 Package 。http://summernote.org/deep-dive/#callbacks
因此,如果您使用v0.7.0或更高版本的summernote,jcuenod的答案现在可以重写为:
rbpvctlc3#
onPaste-callback工作得很好,但是我遇到了不同浏览器对换行符的不同处理的问题,所以我想出了下面的解决方案,它使用了html-linebreaks:
x8goxv8g4#
设法使一个可怕的黑客工作的IE11。这将可悲的是,也要求从用户粘贴权限。如果有人想出一个更好的建议,我洗耳恭听。
JSFiddle
91zkwejq5#
在我的例子中,以上所有的解决方案都不起作用。通过使用这些解决方案,我找到了一个解决方案,这对我很有效。
vvppvyoh6#
onPaste for Rich Text Editor无法完美工作,我们需要干扰以纯文本粘贴和粘贴(pasteHTML),我们需要从clipboardData html中删除html和body标记,并使用span标记将其 Package