CODEWITHSUNDEEP
jqueryangularjssummernote
Zhipeng YANG
Zhipeng YANG

Reputation: 805

How do I add an onPaste listener to a summernote in AngularJS?

A summernote is dynamically added to my site. It means that after user has clicked a button, it will pop up a window with a summernote div.

And I would like to add an onPaste listener for that div using AngularJS.

I don't want to use jQuery to add the listener like this:

$(document).ready(function (){
    $('.summernote').summernote({
        onPaste: function(e){
            setTimeout(function (e) {
                alert('pasted');
            }, 20);
        }
    });
});

Upvotes: 1

Views: 1103

Answers (1)

Matt M
Matt M

Reputation: 3779

Apparently, there is a directive for this: here

Just inject the dependency in your module like this: angular.module('myApp', ['summernote']); and you can use it as an element: <summernote></summernote> or an attribute: <div summernote></div>

Here is a link to the event listeners, including paste.

EDIT

In order to wire up the paste event handler, you need to add on-paste=paste() to the directive as an attribute and add the corresponding "paste" function to your $scope inside your controller. Here is the complete example listed in the docs:

function DemoController($scope) {
  $scope.init = function() { console.log('Summernote is launched'); }
  $scope.enter = function() { console.log('Enter/Return key pressed'); }
  $scope.focus = function(e) { console.log('Editable area is focused'); }
  $scope.blur = function(e) { console.log('Editable area loses focus'); }
  $scope.paste = function(e) { console.log('Called event paste'); }
  $scope.change = function(contents) {
    console.log('contents are changed:', contents, $scope.editable);
  };
  $scope.keyup = function(e) { console.log('Key is released:', e.keyCode); }
  $scope.keydown = function(e) { console.log('Key is pressed:', e.keyCode); }
  $scope.imageUpload = function(files) {
    console.log('image upload:', files);
    console.log('image upload\'s editable:', $scope.editable);
  }
}

And in your markup:

  <summernote on-init="init()" on-enter="enter()" on-focus="focus(evt)"
        on-blur="blur(evt)" on-paste="paste()" on-keyup="keyup(evt)"
        on-keydown="keydown(evt)" on-change="change(contents)"
        on-image-upload="imageUpload(files)" editable="editable" 
        editor="editor">
    </summernote>

Upvotes: 1

Related Questions