Paste content as plain text in summernote editor

48.8k views Asked by At

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?

6

There are 6 answers

11
jcuenod On BEST ANSWER

Use the onPaste Callback

Use the onPaste option to define a callback that will strip the tags and manually insert the text.

$editor.summernote({
    onPaste: function (e) {
        var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
        e.preventDefault();
        document.execCommand('insertText', false, bufferText);
    }
});

Credit: https://github.com/summernote/summernote/issues/303

Solve Firefox Problems:

You may still have problems with Firefox. If so, wrap document.execCommand in a timer function to delay its execution a tiny bit:

setTimeout(function(){
    document.execCommand( 'insertText', false, bufferText );
}, 10);

Update for v0.7.0+

Position of callbacks in options is changed after v0.7.0
After v0.7.0, every callbacks should be wrapped by callbacks object. (source)

This means that the original code should be written as

$editor.summernote({
    callbacks: {
        onPaste: function (e) {
            var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
            e.preventDefault();
            document.execCommand('insertText', false, bufferText);
        }
    }
});

Credit to Mathieu Castets for pointing this out (so if this bit helped, upvote his answer!)

TL;DR: Here's a functional demo

2
Tien Dang 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
Tom Glover 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();
                    }
                }

            }
        }
    })
})

JSFiddle

0
Theo 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
Mathieu Castets 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
Prosanta Chaki 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);
  })