如何在AngularJS中的summernote中添加onPaste侦听器？

Question

summernote动态添加到我的网站。这意味着在用户点击按钮后，它将弹出一个带有summernote div的窗口。

我会喜欢使用AngularJS为div添加一个onPaste侦听器。

我没有想要使用jQuery添加这样的监听器：

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

Answer 1

显然，有一个指令：here

只需在您的模块中注入依赖关系：angular.module('myApp', ['summernote']);，然后您可以将其用作element：<summernote></summernote>或attribute：<div summernote></div> < / p>

Here是指向事件监听器的链接，包括粘贴。

修改

为了连接粘贴事件处理程序，您需要将on-paste=paste()作为属性添加到指令中，并添加相应的＆＃34;粘贴＆＃34;函数到控制器内的$ scope。以下是文档中列出的完整示例：

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

在你的标记中：

  <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>