Search code examples
javascripthtmlsummernote

Paste content as plain text in summernote editor


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?


Solution

  • 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