Javascript nicEdit:向编辑器添加按键(按|向上|向下)事件
我使用的是RTF文本区,需要添加一个Javascript nicEdit:向编辑器添加按键(按|向上|向下)事件,javascript,nicedit,Javascript,Nicedit,我使用的是RTF文本区,需要添加一个onkeypress,onkeypup或onkeypdown事件 我创建的实例如下所示: var emailRtf = new nicEditor({ iconsPath : 'nicEdit/nicEditorIcons.gif', buttonList : ['bold','italic','underline','fontSize','forecolor','ol','ul','link','unlink','removeformat'],
onkeypress
,onkeypup
或onkeypdown
事件
我创建的实例如下所示:
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
和keydup
):
然而,以下工作:
emailRtf.addEvent("blur", function() { alert('test') }); // Alert shows when I leave focus on the textArea
如何将键(按|向上|向下)
添加到nicEdit编辑器
注意:我的页面中有多个RTF textarea实例,我只需要将
键(按下|向下|向上)
事件添加到一个。我发现了一个问题,它在所有实例上添加了事件另外,我想保留nicEdit.js的完整性。经过一天的研究,如果不修改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');
var emailRtf = new nicEditor({
iconsPath : 'nicEdit/nicEditorIcons.gif',
buttonList : ['bold','italic','underline','fontSize','forecolor','ol','ul','link','unlink','removeformat'],
maxHeight: 600
}).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,
customKeyDownFunction: function() { alert('key down!'); }
}).panelInstance('REPLY_MESSAGE');
var emailRtf = new nicEditor({
iconsPath : 'nicEdit/nicEditorIcons.gif',
buttonList : ['bold','italic','underline','fontSize','forecolor','ol','ul','link','unlink','removeformat'],
maxHeight: 600
}).panelInstance('REPLY_MESSAGE');
这是我能做的最好的了。如果有人有更好的方法,请告诉我 看一看
这里
它应该在nicedit.js中不做任何更改的情况下工作
$("div.nicEdit-main").keyup(function () { });
看看JSFIDLE阅读。它向您展示了如何在不使用jQuery的情况下将(其支持的)事件绑定到nicEdit实例:
作品没有jQuery时:
document.getElementById('REPLY_MESSAGE').parentElement.onkeypress=函数(){alert('key pressed!');}
@SimonArsenault谢谢你的“没有jquery”回答。这可以完美地工作并保持NicEdit轻量级commentNicEditor.addEvent(“key”,function(){//当用户按下快捷键(如control-b)})
这只适用于快捷键,因此它不起作用。@SimonArsenault它实际上是一篇关于如何在不实际使用jQuery
的情况下绑定事件的官方文档,因为问题没有标记为jQuery
。我知道这一点,但如果您阅读它,它会清楚地显示“快捷键(如control-b)”。它不能像onkeypress那样用于捕获每个键。我认为唯一的方法是接受答案(没有jQuery是在接受的注释中)或直接修改代码源(丑陋的方法)。