Ext 中，为Ext.form.HtmlEditor添加键盘事件
最后更新于：2022-04-01 12:01:15
这里扩展了Ext.form.HtmlEditor组件，为其添加了keyup，keydown，keypress事件监听。重写了Ext.form.HtmlEditor的方法：
initEditor、initComponent；
重写后的Ext.form.HtmlEditor示例：
~~~
/***
* 重写Ext.form.HtmlEditor，为其添加键盘事件
* author: hoojo
* email: hoojo_@126.com
* blog: http://blog.csdn.net/IBM_hoojo
* create by: 2010-8-14
* ext-lib: 3.2.1
* version: 1.0
*/
Ext.override(Ext.form.HtmlEditor, {
initEditor : function(){
var dbody = this.getEditorBody();
var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
ss['background-attachment'] = 'fixed'; // w3c
ss['background-color'] = 'white';
dbody.bgProperties = 'fixed'; // ie
Ext.DomHelper.applyStyles(dbody, ss);
if(this.doc){
try{
Ext.EventManager.removeAll(this.doc);
}catch(e){}
}
this.doc = this.getDoc();
Ext.EventManager.on(this.doc, {
'mousedown': this.onEditorEvent,
'dblclick': this.onEditorEvent,
'click': this.onEditorEvent,
'keyup': this.onEditorKeyUpEvent,
'keydown': this.onEditorKeyDownEvent,
'keypress': this.onEditorKeyPressEvent,
buffer:100,
scope: this
});
if(Ext.isGecko){
Ext.EventManager.on(this.doc, 'keypress', this.applyCommand, this);
}
if(Ext.isIE || Ext.isSafari || Ext.isOpera){
Ext.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
}
this.initialized = true;
this.fireEvent('initialize', this);
this.doc.editorInitialized = true;
this.pushValue();
},
initComponent: function () {
this.addEvents(
'initialize',
'activate',
'beforesync',
'beforepush',
'sync',
'push',
'editmodechange',
'keydown',
'keyup',
'keypress'
);
},
onEditorKeyPressEvent : function(e){
this.updateToolbar();
this.fireEvent("keypress", this, e);
},
onEditorKeyUpEvent : function(e){
this.updateToolbar();
this.fireEvent("keyup", this, e);
},
onEditorKeyDownEvent : function(e){
this.updateToolbar();
this.fireEvent("keydown", this, e);
}
});
/**
* 重写后的Ext.form.HtmlEditor有了键盘的keyPress事件了
*/
Ext.ns("Ext.hoo.editor");
Ext.hoo.editor.HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
constructor: function () {
Ext.hoo.editor.HTMLEditor.superclass.constructor.call(this, {
renderTo: Ext.getBody(),
fieldLabel:'Biography',
height:200,
listeners: {
"keydown": function (editor, e) {
alert("keydown:" + editor.getValue());
},
"keyup": function (editor, e) {
alert("keyup:" + editor.getValue());
},
"keypress": function (editor, e) {
alert("keypress:" + editor.getValue());
}
}
});
}
});
~~~
注意：要添加键盘事件请添加Ext.override里的那段代码。这段是扩展代码，目的是为HtmlEditor添加键盘事件的。
html页面
~~~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ext 示例</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.2.1/ext-all.js"></script>
<script type="text/javascript" src="HtmlEditor.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
new Ext.hoo.editor.HTMLEditor();
});
</script>
</head>
<body>
</body>
</html>
~~~