nicEdit：为编辑器添加按键（按下|弹起|按下）事件

Question

我正在使用 nicEdit 创建一个RTF文本框，我需要添加 onkeypress ， onkeyup 或 onkeydown 事件。

我是这样创建实例的：

var emailRtf = new nicEditor({  iconsPath : 'nicEdit/nicEditorIcons.gif', 
    buttonList : ['bold','italic','underline','fontSize','forecolor','ol','ul','link','unlink','removeformat'],
    maxHeight: 600}).panelInstance('REPLY_MESSAGE');

我尝试了以下方法（使用 keypress、keydown 和 keyup）：

emailRtf.addEvent("keypress", function() { alert('test') }); // Not working
emailRtf.addEvent("keypress", function(evt) { alert('test') }); // Not working

然而，以下内容有效：

emailRtf.addEvent("blur", function() { alert('test') }); // Alert shows when I leave focus on the textArea

我该如何在nicEdit编辑器中添加key(press|up|down)事件？

注意：我的页面上有多个RTF文本区域，我只需要向其中一个添加key(press|down|up)事件。我在这个问题中找到了解决方法，但是此方法会在所有实例上添加该事件。另外，我希望保留nicEdit.js不变。

- Simon Arsenault

Answer 1

请看这里如何在所见即所得编辑器（NicEdit）中限制字符数

它应该可以在不更改nicedit.js的情况下工作。

$("div.nicEdit-main").keyup(function () { });

请看jsfiddle http://jsfiddle.net/jGLRn/15/

- nevtag

---

行！没有jQuery： document.getElementById（'REPLY_MESSAGE'）.parentElement.onkeypress = function（）{alert（'按键被按下！'）;}; - Simon Arsenault

@SimonArsenault 感谢你的“不使用jquery”的答案。这很完美，也保持了NicEdit的轻量级。 - AlbatrossCafe

Answer 2

在这里阅读官方文档，文档展示了如何将支持的事件绑定到您的nicEdit实例中，无需使用jQuery：

var commentNicEditor = new nicEditor().panelInstance('comment');
commentNicEditor.addEvent("blur", function () {
    // Sent when an editor instance loses focus    
});
commentNicEditor.addEvent("focus", function () {
    // Send when an editor gains focus (IE someone clicks inside it)    
});
commentNicEditor.addEvent("key", function () {
    // When the user presses a shortcut key (Such as control-b)    
});
commentNicEditor.addEvent("add", function () {
    // Fired when a new instance is added    
});
commentNicEditor.addEvent("panel", function () {
    // Fired when the toolbar is initialized for new instances (This is the preferred event if you want to add a function when NicEdit instances are created)    
});

- Robin van Baalen

---

commentNicEditor.addEvent("key", function () { // 当用户按下快捷键（例如control-b）时 });那只是针对快捷键的，所以它不起作用。 - Simon Arsenault

@SimonArsenault，实际上这是官方文档的一部分，介绍了如何在不使用jQuery的情况下绑定事件，因为该问题未标记为jQuery。 - Robin van Baalen

我知道，但如果你仔细阅读它，它清楚地说“快捷键（例如control-b）”。它不能用于捕获像onkeypress这样的每个按键。我相信唯一的方法是接受的答案（没有jQuery在接受的评论中）或直接修改代码源（丑陋的方式）。 - Simon Arsenault

Answer 3

或者你可以尝试这种方式：

$('body').on("keyup", ".nicEdit-main", function(){
  //Do Something...
}

- Mohsen TOA

Answer 4

经过一天的研究，我无法在不修改nicEdit.js的情况下完成它。但是，我只需进行很少的更改就能够完成。这里是我的更改（我正在使用版本0.9r24）：

我添加了一个名为customKeyDownFunction的配置选项。默认情况下它什么也不做。

var nicEditorConfig = bkClass.extend({
    buttons : {
        'bold' : {name : __('Click to Bold'), command : 'Bold', tags : ['B','STRONG'], css : {'font-weight' : 'bold'}, key : 'b'},
        'italic' : {name : __('Click to Italic'), command : 'Italic', tags : ['EM','I'], css : {'font-style' : 'italic'}, key : 'i'},
        'underline' : {name : __('Click to Underline'), command : 'Underline', tags : ['U'], css : {'text-decoration' : 'underline'}, key : 'u'},
        'left' : {name : __('Left Align'), command : 'justifyleft', noActive : true},
        'center' : {name : __('Center Align'), command : 'justifycenter', noActive : true},
        'right' : {name : __('Right Align'), command : 'justifyright', noActive : true},
        'justify' : {name : __('Justify Align'), command : 'justifyfull', noActive : true},
        'ol' : {name : __('Insert Ordered List'), command : 'insertorderedlist', tags : ['OL']},
        'ul' :  {name : __('Insert Unordered List'), command : 'insertunorderedlist', tags : ['UL']},
        'subscript' : {name : __('Click to Subscript'), command : 'subscript', tags : ['SUB']},
        'superscript' : {name : __('Click to Superscript'), command : 'superscript', tags : ['SUP']},
        'strikethrough' : {name : __('Click to Strike Through'), command : 'strikeThrough', css : {'text-decoration' : 'line-through'}},
        'removeformat' : {name : __('Remove Formatting'), command : 'removeformat', noActive : true},
        'indent' : {name : __('Indent Text'), command : 'indent', noActive : true},
        'outdent' : {name : __('Remove Indent'), command : 'outdent', noActive : true},
        'hr' : {name : __('Horizontal Rule'), command : 'insertHorizontalRule', noActive : true}
    },
    iconsPath : '../nicEditorIcons.gif',
    buttonList : ['save','bold','italic','underline','left','center','right','justify','ol','ul','fontSize','fontFamily','fontFormat','indent','outdent','image','upload','link','unlink','forecolor','bgcolor'],
    iconList : {"bgcolor":1,"forecolor":2,"bold":3,"center":4,"hr":5,"indent":6,"italic":7,"justify":8,"left":9,"ol":10,"outdent":11,"removeformat":12,"right":13,"save":24,"strikethrough":15,"subscript":16,"superscript":17,"ul":18,"underline":19,"image":20,"link":21,"unlink":22,"close":23,"arrow":25},
    customKeyDownFunction : function() { }  
});

我修改了keyDown函数。

keyDown : function(e,t) {
    this.ne.options.customKeyDownFunction();

    if(e.ctrlKey) {
        this.ne.fireEvent('key',this,e);
    }
}

当我创建我的nicEditor实例时，我定义了customKeyDownFunction。

var emailRtf = new nicEditor({  
        iconsPath : 'nicEdit/nicEditorIcons.gif', 
        buttonList : ['bold','italic','underline','fontSize','forecolor','ol','ul','link','unlink','removeformat'],
        maxHeight: 600,
        customKeyDownFunction: function() { alert('key down!'); }
    }).panelInstance('REPLY_MESSAGE');

如果您不需要任何自定义功能，只需不定义customKeyDownFunction即可。

var emailRtf = new nicEditor({  
        iconsPath : 'nicEdit/nicEditorIcons.gif', 
        buttonList : ['bold','italic','underline','fontSize','forecolor','ol','ul','link','unlink','removeformat'],
        maxHeight: 600
    }).panelInstance('REPLY_MESSAGE');

这是我能做到的最好了。如果有更好的方法，请告诉我！

- Simon Arsenault