Paste content as plain text in summernote editor Paste content as plain text in summernote editor javascript javascript

Paste content as plain text in summernote editor


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


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);        }    }});


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);        }      }    });