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(/^(&nbsp;|<br>|\s)*|(&nbsp;|<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); return } if (div.innerHTML == t.dom.contentWindow.document.body.innerHTML) return; var width = parseInt(t.getWidth()); Ext.isIE ? width -= 25 : width -= 7 div.style.width = width + 'px' div.innerHTML = t.dom.contentWindow.document.body.innerHTML; this._adjust_h = div.offsetHeight if (this._adjust_h < this._min_h) { this._adjust_h = this._min_h; } t.setHeight(this._adjust_h); }, onEditorEvent : function(e) { if (this.onSpecialKey) { this.onSpecialKey(e); } return FloatHtmlEditor.superclass.onEditorEvent.apply(this, arguments) }, 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; }, markTeamMember : function() { this.teamCmp = true }, initComponent : function() { this.valueEditToolbarId = Ext.id() this.onBlur = Ext.form.Field.prototype.onBlur; FloatHtmlEditor.superclass.initComponent.call(this); this.addEvents('_specialkey') this.on('afterrender', function() { this.getToolbar().hide(); }, this) this.on('show', function() { this._adjust_h = 0; this._adjustHeight.defer(100, this); this.focus() }, this) this.on('initialize', function(ed) { var toolbarWin = this.toolbarWin = new Ext.Window({ html : '<div id="' + this.valueEditToolbarId + '" class=""></div>', height : 255, width : 50, closeAction : 'hide', resizable : false, iconCls : 'icon-toolbox' }) toolbarWin.show(); var xy = this.getHoverTarget().getEl().getXY(); toolbarWin.setPagePosition(xy[0] + this.getHoverTarget().getWidth() - toolbarWin.getWidth(), xy[1]); var el = this.getToolbar().getEl(); var appentToEl = Ext.getDom(this.valueEditToolbarId); appentToEl.className = el.dom.parentNode.className; el.appendTo(appentToEl); this.getToolbar().show(); var tbarRawRow = el.query('.x-toolbar-left-row')[0]; var btnNodes = Ext.Element.fly(tbarRawRow).query('.x-toolbar-cell'); Ext.each(btnNodes, function(btnNode) { var btnEl = Ext.Element.fly(btnNode); if (btnEl.query('.xtb-sep').length) { btnEl.remove(); } else { var newRow = Ext.Element.fly(tbarRawRow) .insertSibling({ tag : 'tr', cls : 'x-toolbar-left-row' }); newRow.appendChild(btnNode); var nel = Ext.Element.fly(btnNode); nel.query('button')[0].setAttribute('unselectable', 'on') nel.on('click', function() { this.fireEvent('styleBtnClick') }, this) } }, this) toolbarWin.hide(); if (!Ext.isIE) { toolbarWin.on('move', function() { ed.markTeamMember() }) } this.getEl().findParent("div", 2, true).query('.x-html-editor-tb')[0].style.display = 'none' Ext.EventManager.on(ed.getWin(), 'blur', function() { if (this.adjustTimer) { clearInterval(this.adjustTimer); delete this.adjustTimer } if (this._measureDiv) { this._measureDiv.innerHTML = '' } this._adjust_h = 0; (function () { var teamCmp = ed.teamCmp; teamCmp ? delete ed.teamCmp : ed.onBlur.apply(ed, arguments) }).defer(10, ed, arguments); }, ed); ed.getWin().document.body.style.overflow = 'hidden' ed.getWin().document.body.style.whiteSpace = 'normal'; ed.getWin().document.body.style.wordWrap = 'break-word'; ed.getWin().document.body.style.lineHeight = '15px'; Ext.EventManager.on(ed.getWin(), 'focus', function() { if (this.teamCmp) delete this.teamCmp }.dg(this), ed); var win = Ext.isIE ? ed.getDoc() : ed.getWin() Ext.EventManager.on(Ext.isIE ? ed.getDoc().documentElement : ed .getWin(), 'paste', function(e) { var html = ed.getDoc().body.innerHTML; if (html.length >= 4 && html.substring(html.length - 4) == '<br>') { ed._beforePasteHTMLPos = html.length - 4; } else { ed._beforePasteHTMLPos = html.length } }) // fix chrome keydown problem Ext.EventManager.on(!Ext.isWebKit ? win : win.document.body, 'keydown', function(e) { if (!this.adjustTimer) { this.adjustTimer = setInterval(function() { this._adjustHeight(); }.dg(this), 200); } if (e.isSpecialKey()) this.fireEvent('_specialkey', this, e) }, ed); // fix IE first range select this.moveCursorToEnd() }, this) }, // public >>> getHoverTarget : Ext.emptyFn, toolbarWin : null, valueEditToolbarId : null, // public <<< _adjust_h : 0, _min_h : 34, setSize : function(w, h) { if (typeof w == 'object') { h = w.height w = w.width } if (this._adjust_h == 0) this._min_h = h - 4; FloatHtmlEditor.superclass.setSize.apply(this, arguments); var t = Ext.Element.fly(this.getEl().parent().query('iframe')[0]); t.setHeight(this._adjust_h ? this._adjust_h : this._min_h); }, focus : function(st, delay) { var t = this.getWin(); if (this._focus_delay) clearTimeout(this._focus_delay) this._focus_delay = window.setTimeout(function() { t.focus(); }, 10); }, moveCursorToEnd : function() { this.focusPatch() }, focusPatch : function() { var ed = this; if (!ed.win) return var doc = ed.getDoc(); ed.win.focus(); if (Ext.isIE) { var r = doc.selection.createRange(); if (r) { r.moveStart('character', 1000); r.collapse(true); r.select(); } } else { var contentDoc = doc; var range = contentDoc.createRange(); var lastNode = contentDoc.body.childNodes[contentDoc.body.childNodes.length - 1]; var end = 0; var selection = ed.getWin().getSelection(); range.setStart(contentDoc.body.firstChild, 0); if (lastNode.nodeType == 3) { end = lastNode.textContent.length; range.setEnd(lastNode, end); } else { range.setEndAfter(lastNode) } selection.removeAllRanges(); // chorme need the range collapsed before add to selection range.collapse(false); selection.addRange(range); } }, showTBWin : function() { var tbwin = this.toolbarWin if (tbwin) { var a = tbwin.toFront tbwin.toFront = function() { } tbwin.show() tbwin.toFront = a } }, // clean all tags syncValue : function() { if (this.initialized) { var bd = this.getEditorBody(); var len = bd.innerHTML.length; FloatHtmlEditor.superclass.syncValue.call(this); if (this._beforePasteHTMLPos != null) { this.syncValue1(); var pastehtml = bd.innerHTML // .substring(this._beforePasteHTMLPos); // replace all tags,only plain text from clipboard var adjustpastehtml = pastehtml // trim spaces between tags // replace \n for excel paste .replace(/\s+/ig, '') // replace tag except for <br> .replace(/<(?!br).*?>/ig, '') if (pastehtml != adjustpastehtml) { bd.innerHTML = adjustpastehtml; } delete this._beforePasteHTMLPos; } } }, destroy : function() { if (this._measureDiv) { this._measureDiv.parentNode.removeChild(this._measureDiv); delete this._measureDiv } if (this.adjustTimer) { clearInterval(this.adjustTimer) delete this.adjustTimer } FloatHtmlEditor.superclass.destroy.call(this) }, enableAlignments : false, enableFont : false, enableLinks : false, enableSourceEdit : true, // 清理excel,word copy paste的内容,code from HtmlLintEditor dirtyHtmlTags : [ // http://stackoverflow.com/questions/2875027/clean-microsoft-word-pasted-text-using-javascript // http://stackoverflow.com/questions/1068280/javascript-regex-multiline-flag-doesnt-work { regex : /<!--[\s\S]*?-->/gi, replaceVal : "" }, // http://www.1stclassmedia.co.uk/developers/clean-ms-word-formatting.php { regex : /<\\?\?xml[^>]*>/gi, replaceVal : "" }, { regex : /<\/?\w+:[^>]*>/gi, replaceVal : "" }, // e.g. <o:p... { regex : /\s*MSO[-:][^;"']*/gi, replaceVal : "" }, { regex : /\s*MARGIN[-:][^;"']*/gi, replaceVal : "" }, { regex : /\s*PAGE[-:][^;"']*/gi, replaceVal : "" }, { regex : /\s*TAB[-:][^;"']*/gi, replaceVal : "" }, { regex : /\s*LINE[-:][^;"']*/gi, replaceVal : "" }, { regex : /\s*FONT-SIZE[^;"']*/gi, replaceVal : "" }, { regex : /\s*LANG=(["'])[^"']*?\1/gi, replaceVal : "" }, // keep new line { regex : /<(P)[^>]*>([\s\S]*?)<\/\1>/gi, replaceVal : "$2<br>" }, { regex : /<(H\d)[^>]*>([\s\S]*?)<\/\1>/gi, replaceVal : "$2" }, { regex : /\s*\w+=(["'])((|\s|;)*|\s*;+[^"']*?|[^"']*?;{2,})\1/gi, replaceVal : "" }, { regex : /<span[^>]*>(|\s)*<\/span>/gi, replaceVal : "" }, // {regex: /<([^\s>]+)[^>]*>(|\s)*<\/\1>/gi, replaceVal: ""}, // http://www.codinghorror.com/blog/2006/01/cleaning-words-nasty-html.html { regex : /<(\/?title|\/?meta|\/?style|\/?st\d|\/?head|\/?html|\/?body|\/?link|!\[)[^>]*?>/gi, replaceVal : "" }, { regex : /(\n(\r)?){2,}/gi, replaceVal : "" }], syncValue1 : function() { if (this.initialized) { var bd = this.getEditorBody(); var html = bd.innerHTML; if (this.hasDirtyHtmlTags(html)) { // Note: the selection will be lost... bd.innerHTML = this.cleanHtml(html); if (Ext.isGecko) { // Gecko hack, see: // https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8 this.setDesignMode(false); // toggle off first this.setDesignMode(true); } } } }, hasDirtyHtmlTags : function(html) { if (!html) return; var hasDirtyHtmlTags = false; Ext.each(this.dirtyHtmlTags, function(tag, idx) { return !(hasDirtyHtmlTags = html.match(tag.regex)); }); return hasDirtyHtmlTags; }, cleanHtml : function(html) { if (!html) return; Ext.each(this.dirtyHtmlTags, function(tag, idx) { html = html.replace(tag.regex, tag.replaceVal); }); // http://www.tim-jarrett.com/labs_javascript_scrub_word.php html = html.replace(new RegExp(String.fromCharCode(8220), 'gi'), '"'); // “ html = html.replace(new RegExp(String.fromCharCode(8221), 'gi'), '"'); // ” html = html.replace(new RegExp(String.fromCharCode(8216), 'gi'), "'"); // ‘ html = html.replace(new RegExp(String.fromCharCode(8217), 'gi'), "'"); // ‘ html = html.replace(new RegExp(String.fromCharCode(8211), 'gi'), "-"); // – html = html.replace(new RegExp(String.fromCharCode(8212), 'gi'), "--"); // — html = html.replace(new RegExp(String.fromCharCode(189), 'gi'), "1/2"); // ½ html = html.replace(new RegExp(String.fromCharCode(188), 'gi'), "1/4"); // ¼ html = html.replace(new RegExp(String.fromCharCode(190), 'gi'), "3/4"); // ¾ html = html.replace(new RegExp(String.fromCharCode(169), 'gi'), "(C)"); // © html = html.replace(new RegExp(String.fromCharCode(174), 'gi'), "(R)"); // ® html = html.replace(new RegExp(String.fromCharCode(8230), 'gi'), "..."); // … return FloatHtmlEditor.superclass.cleanHtml.call(this, html); } })