首頁 > 其他

Ext 中，為Ext.form.HtmlEditor添加鍵盤事件

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這裡擴充了Ext.form.HtmlEditor組件，為其添加了keyup，keydown，keypress事件監聽。重寫了Ext.form.HtmlEditor的方法：

initEditor、initComponent；

 

重寫後的Ext.form.HtmlEditor樣本：

 

/***<br /> * 重寫Ext.form.HtmlEditor，為其添加鍵盤事件<br /> * author: hoojo<br /> * email: hoojo_@126.com<br /> * blog: http://blog.csdn.net/IBM_hoojo<br /> * create by: 2010-8-14<br /> * ext-lib: 3.2.1<br /> * version: 1.0<br /> */<br />Ext.override(Ext.form.HtmlEditor, {<br />initEditor : function(){<br /> var dbody = this.getEditorBody();<br /> var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');<br /> ss['background-attachment'] = 'fixed'; // w3c<br /> ss['background-color'] = 'white';<br /> dbody.bgProperties = 'fixed'; // ie<br /> Ext.DomHelper.applyStyles(dbody, ss);<br /> if(this.doc){<br /> try{<br /> Ext.EventManager.removeAll(this.doc);<br /> }catch(e){}<br /> }<br /> this.doc = this.getDoc();<br /> Ext.EventManager.on(this.doc, {<br /> 'mousedown': this.onEditorEvent,<br /> 'dblclick': this.onEditorEvent,<br /> 'click': this.onEditorEvent,<br /> 'keyup': this.onEditorKeyUpEvent,<br /> 'keydown': this.onEditorKeyDownEvent,<br /> 'keypress': this.onEditorKeyPressEvent,<br /> buffer:100,<br /> scope: this<br /> });<br /> if(Ext.isGecko){<br /> Ext.EventManager.on(this.doc, 'keypress', this.applyCommand, this);<br /> }<br /> if(Ext.isIE || Ext.isSafari || Ext.isOpera){<br /> Ext.EventManager.on(this.doc, 'keydown', this.fixKeys, this);<br /> }<br /> this.initialized = true;<br /> this.fireEvent('initialize', this);<br /> this.doc.editorInitialized = true;<br /> this.pushValue();<br /> },<br />initComponent: function () {<br />this.addEvents(<br /> 'initialize',<br /> 'activate',<br /> 'beforesync',<br /> 'beforepush',<br /> 'sync',<br /> 'push',<br /> 'editmodechange',<br /> 'keydown',<br /> 'keyup',<br /> 'keypress'<br /> );<br />},<br />onEditorKeyPressEvent : function(e){<br /> this.updateToolbar();<br /> this.fireEvent("keypress", this, e);<br /> },<br /> onEditorKeyUpEvent : function(e){<br /> this.updateToolbar();<br /> this.fireEvent("keyup", this, e);<br /> },<br /> onEditorKeyDownEvent : function(e){<br /> this.updateToolbar();<br /> this.fireEvent("keydown", this, e);<br /> }<br />});</p><p>/**<br /> * 重寫後的Ext.form.HtmlEditor有了鍵盤的keyPress事件了<br /> */<br />Ext.ns("Ext.hoo.editor");<br />Ext.hoo.editor.HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {<br />constructor: function () {<br />Ext.hoo.editor.HTMLEditor.superclass.constructor.call(this, {<br /> renderTo: Ext.getBody(),<br /> fieldLabel:'Biography',<br /> height:200,<br />listeners: {<br />"keydown": function (editor, e) {<br />alert("keydown:" + editor.getValue());<br />},<br />"keyup": function (editor, e) {<br />alert("keyup:" + editor.getValue());<br />},<br />"keypress": function (editor, e) {<br />alert("keypress:" + editor.getValue());<br />}<br />}<br />});<br />}<br />});

 注意：要添加鍵盤事件請添加Ext.override裡的那段代碼。這段是擴充代碼，目的是為HtmlEditor添加鍵盤事件的。

 

html頁面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br /><html><br /> <head><br /> <title>Ext 樣本</title></p><p> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><br /> <meta http-equiv="description" content="this is my page"><br /> <meta http-equiv="content-type" content="text/html; charset=gbk"><br /> <link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css" /><br /> <script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script><br /><script type="text/javascript" src="ext-3.2.1/ext-all.js"></script><br /><script type="text/javascript" src="HtmlEditor.js"></script><br /><script type="text/javascript"><br />Ext.onReady(function(){<br />new Ext.hoo.editor.HTMLEditor();<br /> });<br /></script><br /> </head></p><p> <body><br /> </body><br /></html><br />

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More