jqueryasp.net-mvctwitter-bootstrappastesummernote

Paste event in Summernote editor not firing - can not get paste values


I am building an application which uses the Summernote editor (https://summernote.org/).

It works pretty well, and now I want to handle the paste event. Idea is I want to paste content as plain text. A bit of Googling results in this page: Paste content as plain text in summernote editor .

This leads to my problem - I have tried to implement this without success.

MY CODE:

I have implemented the Summernote in my Bootstrap / ASP.NET MVC application like this (I use Summernote 0.8.8):

<div class="form-group mb-3">
        @Html.LabelFor(c => c.Content)
        <div class="card-body">
            <form class="form-horizontal form-bordered">
                <div class="form-group row">
                    <div class="col-sm-12">
                        <textarea name="Content" id="summernote" class="summernote" data-plugin-summernote data-plugin-options='{ "height": 180, "codemirror": { "theme": "ambiance" } }'>
                            @Html.Raw(Model.Content)
                        </textarea>
                    </div>
                </div>
            </form>
        </div>

I now try to add the following code:

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

But this is never hit. If I make a console.log() within the paste function, it never hits.

I then tried to follow the documentation from Summernote website and:

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

Perfect, now the event actually fires. BUT all of these becomes undefined so it fails on GetData:

((e.originalEvent || e).clipboardData || window.clipboardData)

So I get the following error:

Uncaught TypeError: Cannot read property 'getData' of undefined
    at HTMLTextAreaElement.<anonymous> (UpdateCommunication?communicationId=65925cb9-4300-439c-8f96-e00de78e1727:291)
    at HTMLTextAreaElement.dispatch (jquery-1.10.2.js:5109)
    at HTMLTextAreaElement.elemData.handle (jquery-1.10.2.js:4780)
    at Object.trigger (jquery-1.10.2.js:5021)
    at HTMLTextAreaElement.<anonymous> (jquery-1.10.2.js:5705)
    at Function.each (jquery-1.10.2.js:671)
    at init.each (jquery-1.10.2.js:280)
    at init.trigger (jquery-1.10.2.js:5704)
    at Context.triggerEvent (summernote-bs4.js:1707)
    at HTMLDivElement.<anonymous> (summernote-bs4.js:4422)

So the problem I have is that the suggested solution on StackOverflow never fires for me - the callback never hits. If I follow the summernote.paste function, https://summernote.org/deep-dive/#onpaste, the paste values seems to be undefined!


Solution

  • You're lucky I got to play with this tonight :)

    Seems that summernote.paste event gets 2 arguments back

    Instead of

    $('#summernote').on('summernote.paste', function(e) {
    

    use

    $('#summernote').on('summernote.paste', function(e, ne) {
    

    and use 'ne' instead of the 'e' in the fn body

    found the solution here: https://github.com/summernote/summernote/issues/303#issuecomment-229823549