extjs3.3 htmleditor各种更正和扩充-HTML教程-爱易网页

extjs3.3 htmleditor各种更正和扩充

日期：2014-05-17　浏览次数：20768 次

extjs3.3 htmleditor各种修正和扩充

1.editor的iframe window的keydown事件绑定

由于htmleditor本身提供的specialkey event不给力，所以自己手动在init时增加更加精确的keydown事件来弥补

需要注意的是：chrome的事件必须绑定在body上，否则ENTER这种特殊的键无法触发

?

var win = Ext.isIE ? ed.getDoc() : ed.getWin(); ... Ext.EventManager.on(!Ext.isWebKit ? win : win.document.body, 'keydown', function(e) { if (e.isSpecialKey()) this.fireEvent('_specialkey', this, e) }, ed);

?

2.chrome下htmleditor回车会有问题（光标位置不正确），发现源代码中extjs官网是加了2个br，结果是不对的，修正方法是在fixKeys方法中修改webkit部分，回车时插入\n（chrome会自动变成\n<br>）,getvalue时干掉所有\n<br>,比较纠结的方法，但是能解决问题，代码如下

?

fixKeys : function() { if (Ext.isIE) { ... } else if (Ext.isOpera) { ... } else if (Ext.isWebKit) { return function(e) { var k = e.getKey(); if (k == e.TAB) { e.stopEvent(); this.execCmd('InsertText', '\t'); this.deferFocus(); } else if (k == e.ENTER) { e.stopEvent(); // fix chrome ENTER double pressed bug <strong>this.execCmd('InsertText', '\n'); </strong> this.deferFocus(); } }; } }(), getValue : function() { var ret = FloatHtmlEditor.superclass.getValue.apply(this, arguments); if (ret) { // fix edit grid panel compare startvalue & nowvalue // fix '\n' patch for webkit(chrome) when ENTER pressed ret = ret.replace(/^( |<br>|\s)*|( |<br>|\s)*$/ig, '') ret = ret.replace(/<div>(.+?)<\/div>/ig,'<br>$1') } if (!ret) { ret = ''; } return ret; },

?

FloatHtmlEditor 是一个用于嵌入在grid中的editor，主要是修改了edit的bar，能够浮动出来，节约grid中的编辑区域

其他扩展特性：

* copy/paste 简化所有copy内容为纯文本，包括word/excel等复杂的格式

* 能够自适应文字大小，自动扩展编辑区域

* 修正多个平台下的focus的问题（htmleditor默认的focus和其他field有区别，不能定位的文字末尾）

完整源码：

?

var FloatHtmlEditor = Ext.extend(Ext.form.HtmlEditor, { fixKeys : function() { if (Ext.isIE) { return function(e) { var k = e.getKey(), doc = this.getDoc(), r; if (k == e.TAB) { e.stopEvent(); r = doc.selection.createRange(); if (r) { r.collapse(true); r.pasteHTML(''); this.deferFocus(); } } else if (k == e.ENTER) { r = doc.selection.createRange(); if (r) { var target = r.parentElement(); if (!target || target.tagName.toLowerCase() != 'li') { e.stopEvent(); r.pasteHTML('<br />'); r.collapse(false); r.select(); } } } }; } else if (Ext.isOpera) { return function(e) { var k = e.getKey(); if (k == e.TAB) { e.stopEvent(); this.win.focus(); this.execCmd('InsertHTML', ''); this.deferFocus(); } }; } else if (Ext.isWebKit) { return function(e) { var k = e.getKey(); if (k == e.TAB) { e.stopEvent(); this.execCmd('InsertText', '\t'); this.deferFocus(); } else if (k == e.ENTER) { e.stopEvent(); // fix chrome ENTER double pressed bug this.execCmd('InsertHTML', '\n<br>'); this.deferFocus(); } }; } }(), _measureDiv : null, _getFrame : function() { if (!this._frm) this._frm = this.getEl().parent().query('iframe')[0]; return this._frm }, _adjustHeight : function() { var t = Ext.fly(this._getFrame()); var div = this._measureDiv if (!div) { div = this._measureDiv = this.__measureDiv = document .createElement('div'); div.style.position = 'absolute'; // div.style.border = '1px solid red' div.style.top = '-1px'; div.style.left = '-10000px' div.style.whiteSpace = 'normal'; div.style.wordWrap = 'break-word'; div.style.lineHeight = '15px' document.body.appendChild(div) } if (t.dom.contentWindow.document.body.innerHTML == '') { t.setHeight(this._min_h); r <div class="clearfix"></div> </div> <nav aria-label="..."> <ul class="pager"> <li class="previous"><a href="52810">上一篇：说说标准系列目录 </a></li> <li class="next"><a href="47265">下一篇： html css3 影子字内嵌入字 </a></li> </ul> </nav> <div class="alert alert-warning" role="alert"> <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">相关资料<span><a target="_blank" class="pull-right" href="/html/">更多></a></span></h3> </div> <div class="panel-body row"> <ol> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/html/45635' title=' html5 基础绘图兑现方法 ' target="_blank"> html5 基础绘图兑现方法 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/html/52547' title=' 说说标准——CSS核心可视化格式模型(visual formatting model)之十一：绝对定位 ' target="_blank"> 说说标准——CSS核心可视化格式模型(visual formatting model)之十一：绝对定位 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/html/47145' title=' html正则表达式以及string含有参数 ' target="_blank"> html正则表达式以及string含有参数 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/html/45881' title=' CSS适用小技巧 ' target="_blank"> CSS适用小技巧 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/html/49506' title=' HTML Table TR TD 边距有关问题 ' target="_blank"> HTML Table TR TD 边距有关问题 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/html/46348' title=' 对于css+div网站复建学习的拙见（1）–准备篇 ' target="_blank"> 对于css+div网站复建学习的拙见（1）–准备篇 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/html/49734' title=' 请教这个代码怎么让每一个div里面的文字都垂直居中 ' target="_blank"> 请教这个代码怎么让每一个div里面的文字都垂直居中 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/html/51131' title=' 哪位大哥大姐有《精通CSS+DIV网页样式与布局》的源文件啊该怎么解决 ' target="_blank"> 哪位大哥大姐有《精通CSS+DIV网页样式与布局》的源文件啊该怎么解决 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/html/39567' title=' 译：HTML5演练文稿资源列表 ' target="_blank"> 译：HTML5演练文稿资源列表 </a></li></div> </ol> </div> </div> </div> <div class="col-lg-4 hidden-sm hidden-xs">  <a id="AdPageRight1_AdPageRight" href="http://www.tdyun.com/host/?aiyiweb" target="_blank"><img class="img-responsive" src="/images/TdPageAd/host.png" alt="香港全能空间香港高速云虚拟主机PHP/ASP/NET送MSSQL和MYSQL" /></a> <script src='/Scripts/AdContentPage300_1.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_2.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_3.js' language='javascript'></script> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">推荐阅读<span><a target="_blank" class="pull-right" href="/html/">更多></a></span></h3> </div> <div class="panel-body"> <ol> <li class="articleAbout"><a href=/html/43992 title=' HTML中clientHeight/ scrollHeight等的差别 ' target="_blank"> HTML中clientHeight/ scrollHeight等的差别 </a></li> <li class="articleAbout"><a href=/html/49499 title=' html + javascript 怎么实现点击下载链接或按钮弹出下载对话框 ' target="_blank"> html + javascript 怎么实现点击下载链接或按钮弹出下载对话框 </a></li> <li class="articleAbout"><a href=/html/46284 title=' 【最新拾掇】HTML5入门介绍及超酷网站欣赏 ' target="_blank"> 【最新拾掇】HTML5入门介绍及超酷网站欣赏 </a></li> <li class="articleAbout"><a href=/html/39990 title=' 在页面直接展示日历 ' target="_blank"> 在页面直接展示日历 </a></li> <li class="articleAbout"><a href=/html/50880 title=' 这两个方框为什么对不齐，不一样高？解决方案 ' target="_blank"> 这两个方框为什么对不齐，不一样高？解决方案 </a></li> <li class="articleAbout"><a href=/html/40812 title=' 资讯正文提取之joyhtml ' target="_blank"> 资讯正文提取之joyhtml </a></li> <li class="articleAbout"><a href=/html/48183 title=' 请推荐html学习的好书适合菜鸟 ' target="_blank"> 请推荐html学习的好书适合菜鸟 </a></li> <li class="articleAbout"><a href=/html/45372 title=' PHP将字符串转入HTML的实体引用（收集） ' target="_blank"> PHP将字符串转入HTML的实体引用（收集） </a></li> <li class="articleAbout"><a href=/html/39813 title=' 网格线起始位置,该如何处理 ' target="_blank"> 网格线起始位置,该如何处理 </a></li> <li class="articleAbout"><a href=/html/50398 title=' 把style写在<style>和标签后面的区别,该如何处理 ' target="_blank"> 把style写在<style>和标签后面的区别,该如何处理 </a></li> <li class="articleAbout"><a href=/html/47832 title=' 请教大家写html的时候用什么编译比较方便？ ' target="_blank"> 请教大家写html的时候用什么编译比较方便？ </a></li> <li class="articleAbout"><a href=/html/52565 title=' 页面刷新后变空白，但是链接可以点击。解决办法 ' target="_blank"> 页面刷新后变空白，但是链接可以点击。解决办法 </a></li> <li class="articleAbout"><a href=/html/40380 title=' css > 手机端不显示 A 标签影子 ' target="_blank"> css > 手机端不显示 A 标签影子 </a></li> <li class="articleAbout"><a href=/html/45487 title=' 3个div在一行下的宽度设定有关问题 ' target="_blank"> 3个div在一行下的宽度设定有关问题 </a></li> <li class="articleAbout"><a href=/html/46711 title=' CSS float高度有关问题 ' target="_blank"> CSS float高度有关问题 </a></li> <li class="articleAbout"><a href=/html/44637 title=' 用CSS3生成多列文本源 ' target="_blank"> 用CSS3生成多列文本源 </a></li> <li class="articleAbout"><a href=/html/50352 title=' 新手提问,如何设HTML里面表格高度为100% ,即自适应浏览器高度 ' target="_blank"> 新手提问,如何设HTML里面表格高度为100% ,即自适应浏览器高度 </a></li> <li class="articleAbout"><a href=/html/41240 title=' div居中，但如果有竖着的滚动条，div会往左偏，如何解决 ' target="_blank"> div居中，但如果有竖着的滚动条，div会往左偏，如何解决 </a></li> <li class="articleAbout"><a href=/html/40020 title=' div浮动有关问题就差2步大姐路过帮小弟我看看先谢过 ' target="_blank"> div浮动有关问题就差2步大姐路过帮小弟我看看先谢过 </a></li> <li class="articleAbout"><a href=/html/41088 title=' 为啥设置的滤镜效果根本没有用 ' target="_blank"> 为啥设置的滤镜效果根本没有用 </a></li> </ol> </div> </div> </div> </div> <div class="clearfix"></div> <footer class=" footer navbar-bottom"> <em>友情链接：</em> <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a> <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a> <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a> <br /> <script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script> Copyright © 2013-2024 爱易网页当前在线：662人　网站在19时17分47秒内访问总人数：211919人当前 17.40% 　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script> </footer> </div> </body> </html>