summernote doesn't allow to format pasted text after writing onpaste event
Asked Answered
R

2

2

my issue is that, when i paste data in summernote is clears the formatting but if i want to format the pasted text as i want it doesn't allow me to make changes in pasted text nor in the text i m writing in editor. i have used this code for binding onpaste event to summernote.

I am Using summernote.js version 0.5.8

    $(".summernote").summernote({
            onpaste: function (e) {
            debugger;
            var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
            e.preventDefault();
            setTimeout(function () {
                document.execCommand('insertHTML', false, bufferText);
            }, 10);
        }
    })
Raynaraynah answered 19/11, 2015 at 9:31 Comment(0)
R
1

Got the solution to my problem.I had to destroy the object of Summernote and reinitialize it. I am not sure whether it is a right way of coding or not but it worked for me. I did this on layout page as I am using Summernote various different places in my project

    $(".summernote").summernote({ height: 250 });

        $(".summernote").summernote({
            onpaste: function (e) {
                var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
                e.preventDefault();
                setTimeout(function () {
                    document.execCommand('insertText', false, bufferText);
                    $(this).parent().siblings('.summernote').destroy();                        
                }, 10);
            }
        });
Raynaraynah answered 1/12, 2015 at 13:41 Comment(0)
C
2

In html file use on-paste attribute

<div summernote="rules"
     ng-model="league.rules"
     validate-summernote="checkLeagueRules" 
     config="summernote_options"
     on-paste="removeFormatting(evt)"
     class="summernote"
></div>

In controller use removeFormatting function

$scope.removeFormatting = function(e)
{ 
    var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
    e.preventDefault();
    // Firefox fix
    setTimeout(function () {            
        document.execCommand('insertText', false, bufferText);
    }, 10);  
}
Centonze answered 4/9, 2017 at 11:18 Comment(0)
R
1

Got the solution to my problem.I had to destroy the object of Summernote and reinitialize it. I am not sure whether it is a right way of coding or not but it worked for me. I did this on layout page as I am using Summernote various different places in my project

    $(".summernote").summernote({ height: 250 });

        $(".summernote").summernote({
            onpaste: function (e) {
                var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
                e.preventDefault();
                setTimeout(function () {
                    document.execCommand('insertText', false, bufferText);
                    $(this).parent().siblings('.summernote').destroy();                        
                }, 10);
            }
        });
Raynaraynah answered 1/12, 2015 at 13:41 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.