Ext 中，为Ext.form.HtmlEditor添加键盘事件

来源：互联网发布：阴阳师数据分析编辑：程序博客网时间：2024/05/27 20:51

这里扩展了Ext.form.HtmlEditor组件，为其添加了keyup，keydown，keypress事件监听。重写了Ext.form.HtmlEditor的方法：

initEditor、initComponent；

重写后的Ext.form.HtmlEditor示例：

[javascript] view plaincopyprint?
/*** 
 * 重写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页面

[xhtml] view plaincopyprint?
<!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>  