I need to copy paste some content in my summernote editor .But when I paste, it takes the style of the page from where I have copied it.I need to paste it as plain text. Is there any solution?
Paste content as plain text in summernote editor
48.8k views Asked by Revathy kr At
6
There are 6 answers
2
On
onPaste for Rich Text Editor not working perfectly, we will need to interfere both paste as plain and paste (pasteHTML), we need to remove html and body tag out of clipboardData html and wrap them with span tag
import {stateFromHTML} from 'draft-js-import-html';
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);
}
}
1
On
Managed to make a horrible hack work for IE11. This will sadly also ask for a paste permission from the user as well. If someone figures out a better suggestion I'm all ears.
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();
}
}
}
}
})
})
0
On
The onPaste-callback works great but I was having problems with the different handling of linebreaks in different browsers. So I came up with the following solution, which uses 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);
}
}
});
1
On
After v0.7.0, every callbacks should be wrapped by callbacks object. http://summernote.org/deep-dive/#callbacks
So if you are using summernote from v0.7.0 or above, jcuenod's answer could now be rewritten as:
$('.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);
}
}
});
0
On
In my case, all of the above solutions did not work. By using those I found a solution, that works for me.
$('#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);
})
Use the
onPasteCallbackUse the
onPasteoption to define a callback that will strip the tags and manually insert the text.Credit: https://github.com/summernote/summernote/issues/303
Solve Firefox Problems:
You may still have problems with Firefox. If so, wrap
document.execCommandin a timer function to delay its execution a tiny bit:Update for v0.7.0+
This means that the original code should be written as
Credit to Mathieu Castets for pointing this out (so if this bit helped, upvote his answer!)
TL;DR: Here's a functional demo