nicEdit:向编辑器添加键(按|上|下)事件

nicEdit : Add key(press|up|down) events to editor

本文关键字：事件 编辑器 添加 nicEdit      更新时间：2023-09-26

我使用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

如何将key(press|up|down)添加到nicEdit编辑器?

注:我有多个实例的RTF文本区域在我的页面，我需要添加的key(press|down|up)事件只有一个。我发现了这个问题，它将事件添加到所有实例上。此外，我想让nicEdit.js完整

看一下这里限制所见即所得编辑器(NicEdit)中的字符数

不需要修改nicedit.js

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

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

在这里阅读官方文档。它向您展示了如何将(他们支持的)事件绑定到您的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)    
});

经过一天的研究，我必须修改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');

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

或者您可以这样尝试:

$('body').on("keyup", ".nicEdit-main", function(){
  //Do Something...
}
相关文章：