Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / src / widgets / form / HtmlEditor.js
index 10f8e99..c936750 100644 (file)
 /*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
-/**\r
- * @class Ext.form.HtmlEditor\r
- * @extends Ext.form.Field\r
- * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be \r
- * automatically hidden when needed.  These are noted in the config options where appropriate.\r
- * <br><br>The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not \r
- * enabled by default unless the global {@link Ext.QuickTips} singleton is {@link Ext.QuickTips#init initialized}.\r
- * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT\r
- * supported by this editor.</b>\r
- * <br><br>An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within\r
- * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.\r
- * <br><br>Example usage:\r
- * <pre><code>\r
-// Simple example rendered with default options:\r
-Ext.QuickTips.init();  // enable tooltips\r
-new Ext.form.HtmlEditor({\r
-    renderTo: Ext.getBody(),\r
-    width: 800,\r
-    height: 300\r
-});\r
-\r
-// Passed via xtype into a container and with custom options:\r
-Ext.QuickTips.init();  // enable tooltips\r
-new Ext.Panel({\r
-    title: 'HTML Editor',\r
-    renderTo: Ext.getBody(),\r
-    width: 600,\r
-    height: 300,\r
-    frame: true,\r
-    layout: 'fit',\r
-    items: {\r
-        xtype: 'htmleditor',\r
-        enableColors: false,\r
-        enableAlignments: false\r
-    }\r
-});\r
-</code></pre>\r
- * @constructor\r
- * Create a new HtmlEditor\r
- * @param {Object} config\r
- * @xtype htmleditor\r
- */\r
-\r
-Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {\r
-    /**\r
-     * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)\r
-     */\r
-    enableFormat : true,\r
-    /**\r
-     * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)\r
-     */\r
-    enableFontSize : true,\r
-    /**\r
-     * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)\r
-     */\r
-    enableColors : true,\r
-    /**\r
-     * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)\r
-     */\r
-    enableAlignments : true,\r
-    /**\r
-     * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)\r
-     */\r
-    enableLists : true,\r
-    /**\r
-     * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)\r
-     */\r
-    enableSourceEdit : true,\r
-    /**\r
-     * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)\r
-     */\r
-    enableLinks : true,\r
-    /**\r
-     * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)\r
-     */\r
-    enableFont : true,\r
-    /**\r
-     * @cfg {String} createLinkText The default text for the create link prompt\r
-     */\r
-    createLinkText : 'Please enter the URL for the link:',\r
-    /**\r
-     * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)\r
-     */\r
-    defaultLinkValue : 'http:/'+'/',\r
-    /**\r
-     * @cfg {Array} fontFamilies An array of available font families\r
-     */\r
-    fontFamilies : [\r
-        'Arial',\r
-        'Courier New',\r
-        'Tahoma',\r
-        'Times New Roman',\r
-        'Verdana'\r
-    ],\r
-    defaultFont: 'tahoma',\r
-    /**\r
-     * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to &#8203; (Zero-width space), &nbsp; (Non-breaking space) in Opera and IE6).\r
-     */\r
-    defaultValue: (Ext.isOpera || Ext.isIE6) ? '&nbsp;' : '&#8203;',\r
-\r
-    // private properties\r
-    actionMode: 'wrap',\r
-    validationEvent : false,\r
-    deferHeight: true,\r
-    initialized : false,\r
-    activated : false,\r
-    sourceEditMode : false,\r
-    onFocus : Ext.emptyFn,\r
-    iframePad:3,\r
-    hideMode:'offsets',\r
-    defaultAutoCreate : {\r
-        tag: "textarea",\r
-        style:"width:500px;height:300px;",\r
-        autocomplete: "off"\r
-    },\r
-\r
-    // private\r
-    initComponent : function(){\r
-        this.addEvents(\r
-            /**\r
-             * @event initialize\r
-             * Fires when the editor is fully initialized (including the iframe)\r
-             * @param {HtmlEditor} this\r
-             */\r
-            'initialize',\r
-            /**\r
-             * @event activate\r
-             * Fires when the editor is first receives the focus. Any insertion must wait\r
-             * until after this event.\r
-             * @param {HtmlEditor} this\r
-             */\r
-            'activate',\r
-             /**\r
-             * @event beforesync\r
-             * Fires before the textarea is updated with content from the editor iframe. Return false\r
-             * to cancel the sync.\r
-             * @param {HtmlEditor} this\r
-             * @param {String} html\r
-             */\r
-            'beforesync',\r
-             /**\r
-             * @event beforepush\r
-             * Fires before the iframe editor is updated with content from the textarea. Return false\r
-             * to cancel the push.\r
-             * @param {HtmlEditor} this\r
-             * @param {String} html\r
-             */\r
-            'beforepush',\r
-             /**\r
-             * @event sync\r
-             * Fires when the textarea is updated with content from the editor iframe.\r
-             * @param {HtmlEditor} this\r
-             * @param {String} html\r
-             */\r
-            'sync',\r
-             /**\r
-             * @event push\r
-             * Fires when the iframe editor is updated with content from the textarea.\r
-             * @param {HtmlEditor} this\r
-             * @param {String} html\r
-             */\r
-            'push',\r
-             /**\r
-             * @event editmodechange\r
-             * Fires when the editor switches edit modes\r
-             * @param {HtmlEditor} this\r
-             * @param {Boolean} sourceEdit True if source edit, false if standard editing.\r
-             */\r
-            'editmodechange'\r
-        )\r
-    },\r
-\r
-    // private\r
-    createFontOptions : function(){\r
-        var buf = [], fs = this.fontFamilies, ff, lc;\r
-        for(var i = 0, len = fs.length; i< len; i++){\r
-            ff = fs[i];\r
-            lc = ff.toLowerCase();\r
-            buf.push(\r
-                '<option value="',lc,'" style="font-family:',ff,';"',\r
-                    (this.defaultFont == lc ? ' selected="true">' : '>'),\r
-                    ff,\r
-                '</option>'\r
-            );\r
-        }\r
-        return buf.join('');\r
-    },\r
-    \r
-    /*\r
-     * Protected method that will not generally be called directly. It\r
-     * is called when the editor creates its toolbar. Override this method if you need to\r
-     * add custom toolbar buttons.\r
-     * @param {HtmlEditor} editor\r
-     */\r
-    createToolbar : function(editor){\r
-        \r
-        var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();\r
-        \r
-        function btn(id, toggle, handler){\r
-            return {\r
-                itemId : id,\r
-                cls : 'x-btn-icon',\r
-                iconCls: 'x-edit-'+id,\r
-                enableToggle:toggle !== false,\r
-                scope: editor,\r
-                handler:handler||editor.relayBtnCmd,\r
-                clickEvent:'mousedown',\r
-                tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,\r
-                overflowText: editor.buttonTips[id].title || undefined,\r
-                tabIndex:-1\r
-            };\r
-        }\r
-\r
-        // build the toolbar\r
-        var tb = new Ext.Toolbar({\r
-            renderTo:this.wrap.dom.firstChild\r
-        });\r
-\r
-        // stop form submits\r
-        this.mon(tb.el, 'click', function(e){\r
-            e.preventDefault();\r
-        });\r
-\r
-        if(this.enableFont && !Ext.isSafari2){\r
-            this.fontSelect = tb.el.createChild({\r
-                tag:'select',\r
-                cls:'x-font-select',\r
-                html: this.createFontOptions()\r
-            });\r
-            this.mon(this.fontSelect, 'change', function(){\r
-                var font = this.fontSelect.dom.value;\r
-                this.relayCmd('fontname', font);\r
-                this.deferFocus();\r
-            }, this);\r
-\r
-            tb.add(\r
-                this.fontSelect.dom,\r
-                '-'\r
-            );\r
-        }\r
-\r
-        if(this.enableFormat){\r
-            tb.add(\r
-                btn('bold'),\r
-                btn('italic'),\r
-                btn('underline')\r
-            );\r
-        }\r
-\r
-        if(this.enableFontSize){\r
-            tb.add(\r
-                '-',\r
-                btn('increasefontsize', false, this.adjustFont),\r
-                btn('decreasefontsize', false, this.adjustFont)\r
-            );\r
-        }\r
-\r
-        if(this.enableColors){\r
-            tb.add(\r
-                '-', {\r
-                    itemId:'forecolor',\r
-                    cls:'x-btn-icon',\r
-                    iconCls: 'x-edit-forecolor',\r
-                    clickEvent:'mousedown',\r
-                    tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,\r
-                    tabIndex:-1,\r
-                    menu : new Ext.menu.ColorMenu({\r
-                        allowReselect: true,\r
-                        focus: Ext.emptyFn,\r
-                        value:'000000',\r
-                        plain:true,\r
-                        listeners: {\r
-                            scope: this,\r
-                            select: function(cp, color){\r
-                                this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);\r
-                                this.deferFocus();\r
-                            }\r
-                        },\r
-                        clickEvent:'mousedown'\r
-                    })\r
-                }, {\r
-                    itemId:'backcolor',\r
-                    cls:'x-btn-icon',\r
-                    iconCls: 'x-edit-backcolor',\r
-                    clickEvent:'mousedown',\r
-                    tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,\r
-                    tabIndex:-1,\r
-                    menu : new Ext.menu.ColorMenu({\r
-                        focus: Ext.emptyFn,\r
-                        value:'FFFFFF',\r
-                        plain:true,\r
-                        allowReselect: true,\r
-                        listeners: {\r
-                            scope: this,\r
-                            select: function(cp, color){\r
-                                if(Ext.isGecko){\r
-                                    this.execCmd('useCSS', false);\r
-                                    this.execCmd('hilitecolor', color);\r
-                                    this.execCmd('useCSS', true);\r
-                                    this.deferFocus();\r
-                                }else{\r
-                                    this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);\r
-                                    this.deferFocus();\r
-                                }\r
-                            }\r
-                        },\r
-                        clickEvent:'mousedown'\r
-                    })\r
-                }\r
-            );\r
-        }\r
-\r
-        if(this.enableAlignments){\r
-            tb.add(\r
-                '-',\r
-                btn('justifyleft'),\r
-                btn('justifycenter'),\r
-                btn('justifyright')\r
-            );\r
-        }\r
-\r
-        if(!Ext.isSafari2){\r
-            if(this.enableLinks){\r
-                tb.add(\r
-                    '-',\r
-                    btn('createlink', false, this.createLink)\r
-                );\r
-            }\r
-\r
-            if(this.enableLists){\r
-                tb.add(\r
-                    '-',\r
-                    btn('insertorderedlist'),\r
-                    btn('insertunorderedlist')\r
-                );\r
-            }\r
-            if(this.enableSourceEdit){\r
-                tb.add(\r
-                    '-',\r
-                    btn('sourceedit', true, function(btn){\r
-                        this.toggleSourceEdit(!this.sourceEditMode);\r
-                    })\r
-                );\r
-            }\r
-        }\r
-\r
-        this.tb = tb;\r
-    },\r
-\r
-    /**\r
-     * Protected method that will not generally be called directly. It\r
-     * is called when the editor initializes the iframe with HTML contents. Override this method if you\r
-     * want to change the initialization markup of the iframe (e.g. to add stylesheets).\r
-     */\r
-    getDocMarkup : function(){\r
-        return '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>';\r
-    },\r
-\r
-    // private\r
-    getEditorBody : function(){\r
-        return this.doc.body || this.doc.documentElement;\r
-    },\r
-\r
-    // private\r
-    getDoc : function(){\r
-        return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);\r
-    },\r
-\r
-    // private\r
-    getWin : function(){\r
-        return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];\r
-    },\r
-\r
-    // private\r
-    onRender : function(ct, position){\r
-        Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);\r
-        this.el.dom.style.border = '0 none';\r
-        this.el.dom.setAttribute('tabIndex', -1);\r
-        this.el.addClass('x-hidden');\r
-        if(Ext.isIE){ // fix IE 1px bogus margin\r
-            this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')\r
-        }\r
-        this.wrap = this.el.wrap({\r
-            cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}\r
-        });\r
-\r
-        this.createToolbar(this);\r
-\r
-        this.disableItems(true);\r
-        // is this needed?\r
-        // this.tb.doLayout();\r
-\r
-        this.createIFrame();\r
-\r
-        if(!this.width){\r
-            var sz = this.el.getSize();\r
-            this.setSize(sz.width, this.height || sz.height);\r
-        }\r
-    },\r
-\r
-    createIFrame: function(){\r
-        var iframe = document.createElement('iframe');\r
-        iframe.name = Ext.id();\r
-        iframe.frameBorder = '0';\r
-        iframe.src = Ext.isIE ? Ext.SSL_SECURE_URL : "javascript:;";\r
-        this.wrap.dom.appendChild(iframe);\r
-\r
-        this.iframe = iframe;\r
-\r
-        this.monitorTask = Ext.TaskMgr.start({\r
-            run: this.checkDesignMode,\r
-            scope: this,\r
-            interval:100\r
-        });\r
-    },\r
-\r
-    initFrame : function(){\r
-        Ext.TaskMgr.stop(this.monitorTask);\r
-        this.doc = this.getDoc();\r
-        this.win = this.getWin();\r
-\r
-        this.doc.open();\r
-        this.doc.write(this.getDocMarkup());\r
-        this.doc.close();\r
-\r
-        var task = { // must defer to wait for browser to be ready\r
-            run : function(){\r
-                if(this.doc.body || this.doc.readyState == 'complete'){\r
-                    Ext.TaskMgr.stop(task);\r
-                    this.doc.designMode="on";\r
-                    this.initEditor.defer(10, this);\r
-                }\r
-            },\r
-            interval : 10,\r
-            duration:10000,\r
-            scope: this\r
-        };\r
-        Ext.TaskMgr.start(task);\r
-    },\r
-\r
-\r
-    checkDesignMode : function(){\r
-        if(this.wrap && this.wrap.dom.offsetWidth){\r
-            var doc = this.getDoc();\r
-            if(!doc){\r
-                return;\r
-            }\r
-            if(!doc.editorInitialized || String(doc.designMode).toLowerCase() != 'on'){\r
-                this.initFrame();\r
-            }\r
-        }\r
-    },\r
-    \r
-    disableItems: function(disabled){\r
-        if(this.fontSelect){\r
-            this.fontSelect.dom.disabled = disabled;\r
-        }\r
-        this.tb.items.each(function(item){\r
-            if(item.itemId != 'sourceedit'){\r
-                item.setDisabled(disabled);\r
-            }\r
-        });\r
-    },\r
-\r
-    // private\r
-    onResize : function(w, h){\r
-        Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);\r
-        if(this.el && this.iframe){\r
-            if(typeof w == 'number'){\r
-                var aw = w - this.wrap.getFrameWidth('lr');\r
-                this.el.setWidth(this.adjustWidth('textarea', aw));\r
-                this.tb.setWidth(aw);\r
-                this.iframe.style.width = Math.max(aw, 0) + 'px';\r
-            }\r
-            if(typeof h == 'number'){\r
-                var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();\r
-                this.el.setHeight(this.adjustWidth('textarea', ah));\r
-                this.iframe.style.height = Math.max(ah, 0) + 'px';\r
-                if(this.doc){\r
-                    this.getEditorBody().style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';\r
-                }\r
-            }\r
-        }\r
-    },\r
-\r
-    /**\r
-     * Toggles the editor between standard and source edit mode.\r
-     * @param {Boolean} sourceEdit (optional) True for source edit, false for standard\r
-     */\r
-    toggleSourceEdit : function(sourceEditMode){\r
-        if(sourceEditMode === undefined){\r
-            sourceEditMode = !this.sourceEditMode;\r
-        }\r
-        this.sourceEditMode = sourceEditMode === true;\r
-        var btn = this.tb.items.get('sourceedit');\r
-        if(btn.pressed !== this.sourceEditMode){\r
-            btn.toggle(this.sourceEditMode);\r
-            if(!btn.xtbHidden){\r
-                return;\r
-            }\r
-        }\r
-        if(this.sourceEditMode){\r
-            this.disableItems(true);\r
-            this.syncValue();\r
-            this.iframe.className = 'x-hidden';\r
-            this.el.removeClass('x-hidden');\r
-            this.el.dom.removeAttribute('tabIndex');\r
-            this.el.focus();\r
-        }else{\r
-            if(this.initialized){\r
-                this.disableItems(false);\r
-            }\r
-            this.pushValue();\r
-            this.iframe.className = '';\r
-            this.el.addClass('x-hidden');\r
-            this.el.dom.setAttribute('tabIndex', -1);\r
-            this.deferFocus();\r
-        }\r
-        var lastSize = this.lastSize;\r
-        if(lastSize){\r
-            delete this.lastSize;\r
-            this.setSize(lastSize);\r
-        }\r
-        this.fireEvent('editmodechange', this, this.sourceEditMode);\r
-    },\r
-\r
-    // private used internally\r
-    createLink : function(){\r
-        var url = prompt(this.createLinkText, this.defaultLinkValue);\r
-        if(url && url != 'http:/'+'/'){\r
-            this.relayCmd('createlink', url);\r
-        }\r
-    },\r
-\r
-    // private (for BoxComponent)\r
-    adjustSize : Ext.BoxComponent.prototype.adjustSize,\r
-\r
-    // private (for BoxComponent)\r
-    getResizeEl : function(){\r
-        return this.wrap;\r
-    },\r
-\r
-    // private (for BoxComponent)\r
-    getPositionEl : function(){\r
-        return this.wrap;\r
-    },\r
-\r
-    // private\r
-    initEvents : function(){\r
-        this.originalValue = this.getValue();\r
-    },\r
-\r
-    /**\r
-     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide\r
-     * @method\r
-     */\r
-    markInvalid : Ext.emptyFn,\r
-    \r
-    /**\r
-     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide\r
-     * @method\r
-     */\r
-    clearInvalid : Ext.emptyFn,\r
-\r
-    // docs inherit from Field\r
-    setValue : function(v){\r
-        Ext.form.HtmlEditor.superclass.setValue.call(this, v);\r
-        this.pushValue();\r
-        return this;\r
-    },\r
-\r
-    /**\r
-     * Protected method that will not generally be called directly. If you need/want\r
-     * custom HTML cleanup, this is the method you should override.\r
-     * @param {String} html The HTML to be cleaned\r
-     * @return {String} The cleaned HTML\r
-     */\r
-    cleanHtml : function(html){\r
-        html = String(html);\r
-        if(html.length > 5){\r
-            if(Ext.isWebKit){ // strip safari nonsense\r
-                html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');\r
-            }\r
-        }\r
-        if(html == this.defaultValue){\r
-            html = '';\r
-        }\r
-        return html;\r
-    },\r
-\r
-    /**\r
-     * Protected method that will not generally be called directly. Syncs the contents\r
-     * of the editor iframe with the textarea.\r
-     */\r
-    syncValue : function(){\r
-        if(this.initialized){\r
-            var bd = this.getEditorBody();\r
-            var html = bd.innerHTML;\r
-            if(Ext.isWebKit){\r
-                var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!\r
-                var m = bs.match(/text-align:(.*?);/i);\r
-                if(m && m[1]){\r
-                    html = '<div style="'+m[0]+'">' + html + '</div>';\r
-                }\r
-            }\r
-            html = this.cleanHtml(html);\r
-            if(this.fireEvent('beforesync', this, html) !== false){\r
-                this.el.dom.value = html;\r
-                this.fireEvent('sync', this, html);\r
-            }\r
-        }\r
-    },\r
-    \r
-    //docs inherit from Field\r
-    getValue : function() {\r
-        this[this.sourceEditMode ? 'pushValue' : 'syncValue']();\r
-        return Ext.form.HtmlEditor.superclass.getValue.call(this);\r
-    },\r
-\r
-    /**\r
-     * Protected method that will not generally be called directly. Pushes the value of the textarea\r
-     * into the iframe editor.\r
-     */\r
-    pushValue : function(){\r
-        if(this.initialized){\r
-            var v = this.el.dom.value;\r
-            if(!this.activated && v.length < 1){\r
-                v = this.defaultValue;\r
-            }\r
-            if(this.fireEvent('beforepush', this, v) !== false){\r
-                this.getEditorBody().innerHTML = v;\r
-                if(Ext.isGecko){\r
-                    // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8\r
-                    var d = this.doc,\r
-                        mode = d.designMode.toLowerCase();\r
-                    \r
-                    d.designMode = mode.toggle('on', 'off');\r
-                    d.designMode = mode;\r
-                }\r
-                this.fireEvent('push', this, v);\r
-            }\r
-        }\r
-    },\r
-\r
-    // private\r
-    deferFocus : function(){\r
-        this.focus.defer(10, this);\r
-    },\r
-\r
-    // docs inherit from Field\r
-    focus : function(){\r
-        if(this.win && !this.sourceEditMode){\r
-            this.win.focus();\r
-        }else{\r
-            this.el.focus();\r
-        }\r
-    },\r
-\r
-    // private\r
-    initEditor : function(){\r
-        //Destroying the component during/before initEditor can cause issues.\r
-        try{\r
-            var dbody = this.getEditorBody();\r
-            var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');\r
-            ss['background-attachment'] = 'fixed'; // w3c\r
-            dbody.bgProperties = 'fixed'; // ie\r
-\r
-            Ext.DomHelper.applyStyles(dbody, ss);\r
-\r
-            if(this.doc){\r
-                try{\r
-                    Ext.EventManager.removeAll(this.doc);\r
-                }catch(e){}\r
-            }\r
-\r
-            this.doc = this.getDoc();\r
-\r
-            Ext.EventManager.on(this.doc, {\r
-                'mousedown': this.onEditorEvent,\r
-                'dblclick': this.onEditorEvent,\r
-                'click': this.onEditorEvent,\r
-                'keyup': this.onEditorEvent,\r
-                buffer:100,\r
-                scope: this\r
-            });\r
-\r
-            if(Ext.isGecko){\r
-                Ext.EventManager.on(this.doc, 'keypress', this.applyCommand, this);\r
-            }\r
-            if(Ext.isIE || Ext.isWebKit || Ext.isOpera){\r
-                Ext.EventManager.on(this.doc, 'keydown', this.fixKeys, this);\r
-            }\r
-            this.initialized = true;\r
-            this.fireEvent('initialize', this);\r
-            this.doc.editorInitialized = true;\r
-            this.pushValue();\r
-        }catch(e){}\r
-    },\r
-\r
-    // private\r
-    onDestroy : function(){\r
-        if(this.monitorTask){\r
-            Ext.TaskMgr.stop(this.monitorTask);\r
-        }\r
-        if(this.rendered){\r
-            Ext.destroy(this.tb);\r
-            if(this.wrap){\r
-                this.wrap.dom.innerHTML = '';\r
-                this.wrap.remove();\r
-            }\r
-        }\r
-        if(this.el){\r
-            this.el.removeAllListeners();\r
-            this.el.remove();\r
-        }\r
\r
-        if(this.doc){\r
-            try{\r
-                Ext.EventManager.removeAll(this.doc);\r
-                for (var prop in this.doc){\r
-                   delete this.doc[prop];\r
-                }\r
-            }catch(e){}\r
-        }\r
-        this.purgeListeners();\r
-    },\r
-\r
-    // private\r
-    onFirstFocus : function(){\r
-        this.activated = true;\r
-        this.disableItems(false);\r
-        if(Ext.isGecko){ // prevent silly gecko errors\r
-            this.win.focus();\r
-            var s = this.win.getSelection();\r
-            if(!s.focusNode || s.focusNode.nodeType != 3){\r
-                var r = s.getRangeAt(0);\r
-                r.selectNodeContents(this.getEditorBody());\r
-                r.collapse(true);\r
-                this.deferFocus();\r
-            }\r
-            try{\r
-                this.execCmd('useCSS', true);\r
-                this.execCmd('styleWithCSS', false);\r
-            }catch(e){}\r
-        }\r
-        this.fireEvent('activate', this);\r
-    },\r
-\r
-    // private\r
-    adjustFont: function(btn){\r
-        var adjust = btn.itemId == 'increasefontsize' ? 1 : -1;\r
-\r
-        var v = parseInt(this.doc.queryCommandValue('FontSize') || 2, 10);\r
-        if((Ext.isSafari && !Ext.isSafari2) || Ext.isChrome || Ext.isAir){\r
-            // Safari 3 values\r
-            // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px\r
-            if(v <= 10){\r
-                v = 1 + adjust;\r
-            }else if(v <= 13){\r
-                v = 2 + adjust;\r
-            }else if(v <= 16){\r
-                v = 3 + adjust;\r
-            }else if(v <= 18){\r
-                v = 4 + adjust;\r
-            }else if(v <= 24){\r
-                v = 5 + adjust;\r
-            }else {\r
-                v = 6 + adjust;\r
-            }\r
-            v = v.constrain(1, 6);\r
-        }else{\r
-            if(Ext.isSafari){ // safari\r
-                adjust *= 2;\r
-            }\r
-            v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);\r
-        }\r
-        this.execCmd('FontSize', v);\r
-    },\r
-\r
-    // private\r
-    onEditorEvent : function(e){\r
-        this.updateToolbar();\r
-    },\r
-\r
-\r
-    /**\r
-     * Protected method that will not generally be called directly. It triggers\r
-     * a toolbar update by reading the markup state of the current selection in the editor.\r
-     */\r
-    updateToolbar: function(){\r
-\r
-        if(!this.activated){\r
-            this.onFirstFocus();\r
-            return;\r
-        }\r
-\r
-        var btns = this.tb.items.map, doc = this.doc;\r
-\r
-        if(this.enableFont && !Ext.isSafari2){\r
-            var name = (this.doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();\r
-            if(name != this.fontSelect.dom.value){\r
-                this.fontSelect.dom.value = name;\r
-            }\r
-        }\r
-        if(this.enableFormat){\r
-            btns.bold.toggle(doc.queryCommandState('bold'));\r
-            btns.italic.toggle(doc.queryCommandState('italic'));\r
-            btns.underline.toggle(doc.queryCommandState('underline'));\r
-        }\r
-        if(this.enableAlignments){\r
-            btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));\r
-            btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));\r
-            btns.justifyright.toggle(doc.queryCommandState('justifyright'));\r
-        }\r
-        if(!Ext.isSafari2 && this.enableLists){\r
-            btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));\r
-            btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));\r
-        }\r
-        \r
-        Ext.menu.MenuMgr.hideAll();\r
-\r
-        this.syncValue();\r
-    },\r
-\r
-    // private\r
-    relayBtnCmd : function(btn){\r
-        this.relayCmd(btn.itemId);\r
-    },\r
-\r
-    /**\r
-     * Executes a Midas editor command on the editor document and performs necessary focus and\r
-     * toolbar updates. <b>This should only be called after the editor is initialized.</b>\r
-     * @param {String} cmd The Midas command\r
-     * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)\r
-     */\r
-    relayCmd : function(cmd, value){\r
-        (function(){\r
-            this.focus();\r
-            this.execCmd(cmd, value);\r
-            this.updateToolbar();\r
-        }).defer(10, this);\r
-    },\r
-\r
-    /**\r
-     * Executes a Midas editor command directly on the editor document.\r
-     * For visual commands, you should use {@link #relayCmd} instead.\r
-     * <b>This should only be called after the editor is initialized.</b>\r
-     * @param {String} cmd The Midas command\r
-     * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)\r
-     */\r
-    execCmd : function(cmd, value){\r
-        this.doc.execCommand(cmd, false, value === undefined ? null : value);\r
-        this.syncValue();\r
-    },\r
-\r
-    // private\r
-    applyCommand : function(e){\r
-        if(e.ctrlKey){\r
-            var c = e.getCharCode(), cmd;\r
-            if(c > 0){\r
-                c = String.fromCharCode(c);\r
-                switch(c){\r
-                    case 'b':\r
-                        cmd = 'bold';\r
-                    break;\r
-                    case 'i':\r
-                        cmd = 'italic';\r
-                    break;\r
-                    case 'u':\r
-                        cmd = 'underline';\r
-                    break;\r
-                }\r
-                if(cmd){\r
-                    this.win.focus();\r
-                    this.execCmd(cmd);\r
-                    this.deferFocus();\r
-                    e.preventDefault();\r
-                }\r
-            }\r
-        }\r
-    },\r
-\r
-    /**\r
-     * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated\r
-     * to insert text.\r
-     * @param {String} text\r
-     */\r
-    insertAtCursor : function(text){\r
-        if(!this.activated){\r
-            return;\r
-        }\r
-        if(Ext.isIE){\r
-            this.win.focus();\r
-            var r = this.doc.selection.createRange();\r
-            if(r){\r
-                r.collapse(true);\r
-                r.pasteHTML(text);\r
-                this.syncValue();\r
-                this.deferFocus();\r
-            }\r
-        }else if(Ext.isGecko || Ext.isOpera){\r
-            this.win.focus();\r
-            this.execCmd('InsertHTML', text);\r
-            this.deferFocus();\r
-        }else if(Ext.isWebKit){\r
-            this.execCmd('InsertText', text);\r
-            this.deferFocus();\r
-        }\r
-    },\r
-\r
-    // private\r
-    fixKeys : function(){ // load time branching for fastest keydown performance\r
-        if(Ext.isIE){\r
-            return function(e){\r
-                var k = e.getKey(), r;\r
-                if(k == e.TAB){\r
-                    e.stopEvent();\r
-                    r = this.doc.selection.createRange();\r
-                    if(r){\r
-                        r.collapse(true);\r
-                        r.pasteHTML('&nbsp;&nbsp;&nbsp;&nbsp;');\r
-                        this.deferFocus();\r
-                    }\r
-                }else if(k == e.ENTER){\r
-                    r = this.doc.selection.createRange();\r
-                    if(r){\r
-                        var target = r.parentElement();\r
-                        if(!target || target.tagName.toLowerCase() != 'li'){\r
-                            e.stopEvent();\r
-                            r.pasteHTML('<br />');\r
-                            r.collapse(false);\r
-                            r.select();\r
-                        }\r
-                    }\r
-                }\r
-            };\r
-        }else if(Ext.isOpera){\r
-            return function(e){\r
-                var k = e.getKey();\r
-                if(k == e.TAB){\r
-                    e.stopEvent();\r
-                    this.win.focus();\r
-                    this.execCmd('InsertHTML','&nbsp;&nbsp;&nbsp;&nbsp;');\r
-                    this.deferFocus();\r
-                }\r
-            };\r
-        }else if(Ext.isWebKit){\r
-            return function(e){\r
-                var k = e.getKey();\r
-                if(k == e.TAB){\r
-                    e.stopEvent();\r
-                    this.execCmd('InsertText','\t');\r
-                    this.deferFocus();\r
-                }\r
-             };\r
-        }\r
-    }(),\r
-\r
-    /**\r
-     * Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b>\r
-     * @return {Ext.Toolbar}\r
-     */\r
-    getToolbar : function(){\r
-        return this.tb;\r
-    },\r
-\r
-    /**\r
-     * Object collection of toolbar tooltips for the buttons in the editor. The key\r
-     * is the command id associated with that button and the value is a valid QuickTips object.\r
-     * For example:\r
-<pre><code>\r
-{\r
-    bold : {\r
-        title: 'Bold (Ctrl+B)',\r
-        text: 'Make the selected text bold.',\r
-        cls: 'x-html-editor-tip'\r
-    },\r
-    italic : {\r
-        title: 'Italic (Ctrl+I)',\r
-        text: 'Make the selected text italic.',\r
-        cls: 'x-html-editor-tip'\r
-    },\r
-    ...\r
-</code></pre>\r
-    * @type Object\r
-     */\r
-    buttonTips : {\r
-        bold : {\r
-            title: 'Bold (Ctrl+B)',\r
-            text: 'Make the selected text bold.',\r
-            cls: 'x-html-editor-tip'\r
-        },\r
-        italic : {\r
-            title: 'Italic (Ctrl+I)',\r
-            text: 'Make the selected text italic.',\r
-            cls: 'x-html-editor-tip'\r
-        },\r
-        underline : {\r
-            title: 'Underline (Ctrl+U)',\r
-            text: 'Underline the selected text.',\r
-            cls: 'x-html-editor-tip'\r
-        },\r
-        increasefontsize : {\r
-            title: 'Grow Text',\r
-            text: 'Increase the font size.',\r
-            cls: 'x-html-editor-tip'\r
-        },\r
-        decreasefontsize : {\r
-            title: 'Shrink Text',\r
-            text: 'Decrease the font size.',\r
-            cls: 'x-html-editor-tip'\r
-        },\r
-        backcolor : {\r
-            title: 'Text Highlight Color',\r
-            text: 'Change the background color of the selected text.',\r
-            cls: 'x-html-editor-tip'\r
-        },\r
-        forecolor : {\r
-            title: 'Font Color',\r
-            text: 'Change the color of the selected text.',\r
-            cls: 'x-html-editor-tip'\r
-        },\r
-        justifyleft : {\r
-            title: 'Align Text Left',\r
-            text: 'Align text to the left.',\r
-            cls: 'x-html-editor-tip'\r
-        },\r
-        justifycenter : {\r
-            title: 'Center Text',\r
-            text: 'Center text in the editor.',\r
-            cls: 'x-html-editor-tip'\r
-        },\r
-        justifyright : {\r
-            title: 'Align Text Right',\r
-            text: 'Align text to the right.',\r
-            cls: 'x-html-editor-tip'\r
-        },\r
-        insertunorderedlist : {\r
-            title: 'Bullet List',\r
-            text: 'Start a bulleted list.',\r
-            cls: 'x-html-editor-tip'\r
-        },\r
-        insertorderedlist : {\r
-            title: 'Numbered List',\r
-            text: 'Start a numbered list.',\r
-            cls: 'x-html-editor-tip'\r
-        },\r
-        createlink : {\r
-            title: 'Hyperlink',\r
-            text: 'Make the selected text a hyperlink.',\r
-            cls: 'x-html-editor-tip'\r
-        },\r
-        sourceedit : {\r
-            title: 'Source Edit',\r
-            text: 'Switch to source editing mode.',\r
-            cls: 'x-html-editor-tip'\r
-        }\r
-    }\r
-\r
-    // hide stuff that is not compatible\r
-    /**\r
-     * @event blur\r
-     * @hide\r
-     */\r
-    /**\r
-     * @event change\r
-     * @hide\r
-     */\r
-    /**\r
-     * @event focus\r
-     * @hide\r
-     */\r
-    /**\r
-     * @event specialkey\r
-     * @hide\r
-     */\r
-    /**\r
-     * @cfg {String} fieldClass @hide\r
-     */\r
-    /**\r
-     * @cfg {String} focusClass @hide\r
-     */\r
-    /**\r
-     * @cfg {String} autoCreate @hide\r
-     */\r
-    /**\r
-     * @cfg {String} inputType @hide\r
-     */\r
-    /**\r
-     * @cfg {String} invalidClass @hide\r
-     */\r
-    /**\r
-     * @cfg {String} invalidText @hide\r
-     */\r
-    /**\r
-     * @cfg {String} msgFx @hide\r
-     */\r
-    /**\r
-     * @cfg {String} validateOnBlur @hide\r
-     */\r
-    /**\r
-     * @cfg {Boolean} allowDomMove  @hide\r
-     */\r
-    /**\r
-     * @cfg {String} applyTo @hide\r
-     */\r
-    /**\r
-     * @cfg {String} autoHeight  @hide\r
-     */\r
-    /**\r
-     * @cfg {String} autoWidth  @hide\r
-     */\r
-    /**\r
-     * @cfg {String} cls  @hide\r
-     */\r
-    /**\r
-     * @cfg {String} disabled  @hide\r
-     */\r
-    /**\r
-     * @cfg {String} disabledClass  @hide\r
-     */\r
-    /**\r
-     * @cfg {String} msgTarget  @hide\r
-     */\r
-    /**\r
-     * @cfg {String} readOnly  @hide\r
-     */\r
-    /**\r
-     * @cfg {String} style  @hide\r
-     */\r
-    /**\r
-     * @cfg {String} validationDelay  @hide\r
-     */\r
-    /**\r
-     * @cfg {String} validationEvent  @hide\r
-     */\r
-    /**\r
-     * @cfg {String} tabIndex  @hide\r
-     */\r
-    /**\r
-     * @property disabled\r
-     * @hide\r
-     */\r
-    /**\r
-     * @method applyToMarkup\r
-     * @hide\r
-     */\r
-    /**\r
-     * @method disable\r
-     * @hide\r
-     */\r
-    /**\r
-     * @method enable\r
-     * @hide\r
-     */\r
-    /**\r
-     * @method validate\r
-     * @hide\r
-     */\r
-    /**\r
-     * @event valid\r
-     * @hide\r
-     */\r
-    /**\r
-     * @method setDisabled\r
-     * @hide\r
-     */\r
-    /**\r
-     * @cfg keys\r
-     * @hide\r
-     */\r
-});\r
+/**
+ * @class Ext.form.HtmlEditor
+ * @extends Ext.form.Field
+ * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be
+ * automatically hidden when needed.  These are noted in the config options where appropriate.
+ * <br><br>The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not
+ * enabled by default unless the global {@link Ext.QuickTips} singleton is {@link Ext.QuickTips#init initialized}.
+ * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
+ * supported by this editor.</b>
+ * <br><br>An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
+ * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.
+ * <br><br>Example usage:
+ * <pre><code>
+// Simple example rendered with default options:
+Ext.QuickTips.init();  // enable tooltips
+new Ext.form.HtmlEditor({
+    renderTo: Ext.getBody(),
+    width: 800,
+    height: 300
+});
+
+// Passed via xtype into a container and with custom options:
+Ext.QuickTips.init();  // enable tooltips
+new Ext.Panel({
+    title: 'HTML Editor',
+    renderTo: Ext.getBody(),
+    width: 600,
+    height: 300,
+    frame: true,
+    layout: 'fit',
+    items: {
+        xtype: 'htmleditor',
+        enableColors: false,
+        enableAlignments: false
+    }
+});
+</code></pre>
+ * @constructor
+ * Create a new HtmlEditor
+ * @param {Object} config
+ * @xtype htmleditor
+ */
+
+Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
+    /**
+     * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)
+     */
+    enableFormat : true,
+    /**
+     * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)
+     */
+    enableFontSize : true,
+    /**
+     * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)
+     */
+    enableColors : true,
+    /**
+     * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)
+     */
+    enableAlignments : true,
+    /**
+     * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
+     */
+    enableLists : true,
+    /**
+     * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)
+     */
+    enableSourceEdit : true,
+    /**
+     * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)
+     */
+    enableLinks : true,
+    /**
+     * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)
+     */
+    enableFont : true,
+    /**
+     * @cfg {String} createLinkText The default text for the create link prompt
+     */
+    createLinkText : 'Please enter the URL for the link:',
+    /**
+     * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
+     */
+    defaultLinkValue : 'http:/'+'/',
+    /**
+     * @cfg {Array} fontFamilies An array of available font families
+     */
+    fontFamilies : [
+        'Arial',
+        'Courier New',
+        'Tahoma',
+        'Times New Roman',
+        'Verdana'
+    ],
+    defaultFont: 'tahoma',
+    /**
+     * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to &#160; (Non-breaking space) in Opera and IE6, &#8203; (Zero-width space) in all other browsers).
+     */
+    defaultValue: (Ext.isOpera || Ext.isIE6) ? '&#160;' : '&#8203;',
+
+    // private properties
+    actionMode: 'wrap',
+    validationEvent : false,
+    deferHeight: true,
+    initialized : false,
+    activated : false,
+    sourceEditMode : false,
+    onFocus : Ext.emptyFn,
+    iframePad:3,
+    hideMode:'offsets',
+    defaultAutoCreate : {
+        tag: "textarea",
+        style:"width:500px;height:300px;",
+        autocomplete: "off"
+    },
+
+    // private
+    initComponent : function(){
+        this.addEvents(
+            /**
+             * @event initialize
+             * Fires when the editor is fully initialized (including the iframe)
+             * @param {HtmlEditor} this
+             */
+            'initialize',
+            /**
+             * @event activate
+             * Fires when the editor is first receives the focus. Any insertion must wait
+             * until after this event.
+             * @param {HtmlEditor} this
+             */
+            'activate',
+             /**
+             * @event beforesync
+             * Fires before the textarea is updated with content from the editor iframe. Return false
+             * to cancel the sync.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            'beforesync',
+             /**
+             * @event beforepush
+             * Fires before the iframe editor is updated with content from the textarea. Return false
+             * to cancel the push.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            'beforepush',
+             /**
+             * @event sync
+             * Fires when the textarea is updated with content from the editor iframe.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            'sync',
+             /**
+             * @event push
+             * Fires when the iframe editor is updated with content from the textarea.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            'push',
+             /**
+             * @event editmodechange
+             * Fires when the editor switches edit modes
+             * @param {HtmlEditor} this
+             * @param {Boolean} sourceEdit True if source edit, false if standard editing.
+             */
+            'editmodechange'
+        );
+    },
+
+    // private
+    createFontOptions : function(){
+        var buf = [], fs = this.fontFamilies, ff, lc;
+        for(var i = 0, len = fs.length; i< len; i++){
+            ff = fs[i];
+            lc = ff.toLowerCase();
+            buf.push(
+                '<option value="',lc,'" style="font-family:',ff,';"',
+                    (this.defaultFont == lc ? ' selected="true">' : '>'),
+                    ff,
+                '</option>'
+            );
+        }
+        return buf.join('');
+    },
+
+    /*
+     * Protected method that will not generally be called directly. It
+     * is called when the editor creates its toolbar. Override this method if you need to
+     * add custom toolbar buttons.
+     * @param {HtmlEditor} editor
+     */
+    createToolbar : function(editor){
+        var items = [];
+        var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();
+
+
+        function btn(id, toggle, handler){
+            return {
+                itemId : id,
+                cls : 'x-btn-icon',
+                iconCls: 'x-edit-'+id,
+                enableToggle:toggle !== false,
+                scope: editor,
+                handler:handler||editor.relayBtnCmd,
+                clickEvent:'mousedown',
+                tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,
+                overflowText: editor.buttonTips[id].title || undefined,
+                tabIndex:-1
+            };
+        }
+
+
+        if(this.enableFont && !Ext.isSafari2){
+            var fontSelectItem = new Ext.Toolbar.Item({
+               autoEl: {
+                    tag:'select',
+                    cls:'x-font-select',
+                    html: this.createFontOptions()
+               }
+            });
+
+            items.push(
+                fontSelectItem,
+                '-'
+            );
+        }
+
+        if(this.enableFormat){
+            items.push(
+                btn('bold'),
+                btn('italic'),
+                btn('underline')
+            );
+        }
+
+        if(this.enableFontSize){
+            items.push(
+                '-',
+                btn('increasefontsize', false, this.adjustFont),
+                btn('decreasefontsize', false, this.adjustFont)
+            );
+        }
+
+        if(this.enableColors){
+            items.push(
+                '-', {
+                    itemId:'forecolor',
+                    cls:'x-btn-icon',
+                    iconCls: 'x-edit-forecolor',
+                    clickEvent:'mousedown',
+                    tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,
+                    tabIndex:-1,
+                    menu : new Ext.menu.ColorMenu({
+                        allowReselect: true,
+                        focus: Ext.emptyFn,
+                        value:'000000',
+                        plain:true,
+                        listeners: {
+                            scope: this,
+                            select: function(cp, color){
+                                this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
+                                this.deferFocus();
+                            }
+                        },
+                        clickEvent:'mousedown'
+                    })
+                }, {
+                    itemId:'backcolor',
+                    cls:'x-btn-icon',
+                    iconCls: 'x-edit-backcolor',
+                    clickEvent:'mousedown',
+                    tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,
+                    tabIndex:-1,
+                    menu : new Ext.menu.ColorMenu({
+                        focus: Ext.emptyFn,
+                        value:'FFFFFF',
+                        plain:true,
+                        allowReselect: true,
+                        listeners: {
+                            scope: this,
+                            select: function(cp, color){
+                                if(Ext.isGecko){
+                                    this.execCmd('useCSS', false);
+                                    this.execCmd('hilitecolor', color);
+                                    this.execCmd('useCSS', true);
+                                    this.deferFocus();
+                                }else{
+                                    this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
+                                    this.deferFocus();
+                                }
+                            }
+                        },
+                        clickEvent:'mousedown'
+                    })
+                }
+            );
+        }
+
+        if(this.enableAlignments){
+            items.push(
+                '-',
+                btn('justifyleft'),
+                btn('justifycenter'),
+                btn('justifyright')
+            );
+        }
+
+        if(!Ext.isSafari2){
+            if(this.enableLinks){
+                items.push(
+                    '-',
+                    btn('createlink', false, this.createLink)
+                );
+            }
+
+            if(this.enableLists){
+                items.push(
+                    '-',
+                    btn('insertorderedlist'),
+                    btn('insertunorderedlist')
+                );
+            }
+            if(this.enableSourceEdit){
+                items.push(
+                    '-',
+                    btn('sourceedit', true, function(btn){
+                        this.toggleSourceEdit(!this.sourceEditMode);
+                    })
+                );
+            }
+        }
+
+        // build the toolbar
+        var tb = new Ext.Toolbar({
+            renderTo: this.wrap.dom.firstChild,
+            items: items
+        });
+
+        if (fontSelectItem) {
+            this.fontSelect = fontSelectItem.el;
+
+            this.mon(this.fontSelect, 'change', function(){
+                var font = this.fontSelect.dom.value;
+                this.relayCmd('fontname', font);
+                this.deferFocus();
+            }, this);
+        }
+
+        // stop form submits
+        this.mon(tb.el, 'click', function(e){
+            e.preventDefault();
+        });
+
+        this.tb = tb;
+        this.tb.doLayout();
+    },
+
+    onDisable: function(){
+        this.wrap.mask();
+        Ext.form.HtmlEditor.superclass.onDisable.call(this);
+    },
+
+    onEnable: function(){
+        this.wrap.unmask();
+        Ext.form.HtmlEditor.superclass.onEnable.call(this);
+    },
+
+    setReadOnly: function(readOnly){
+
+        Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly);
+        if(this.initialized){
+            this.setDesignMode(!readOnly);
+            var bd = this.getEditorBody();
+            if(bd){
+                bd.style.cursor = this.readOnly ? 'default' : 'text';
+            }
+            this.disableItems(readOnly);
+        }
+    },
+
+    /**
+     * Protected method that will not generally be called directly. It
+     * is called when the editor initializes the iframe with HTML contents. Override this method if you
+     * want to change the initialization markup of the iframe (e.g. to add stylesheets).
+     *
+     * Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility
+     */
+    getDocMarkup : function(){
+        var h = Ext.fly(this.iframe).getHeight() - this.iframePad * 2;
+        return String.format('<html><head><style type="text/css">body{border: 0; margin: 0; padding: {0}px; height: {1}px; cursor: text}</style></head><body></body></html>', this.iframePad, h);
+    },
+
+    // private
+    getEditorBody : function(){
+        var doc = this.getDoc();
+        return doc.body || doc.documentElement;
+    },
+
+    // private
+    getDoc : function(){
+        return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);
+    },
+
+    // private
+    getWin : function(){
+        return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
+    },
+
+    // private
+    onRender : function(ct, position){
+        Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);
+        this.el.dom.style.border = '0 none';
+        this.el.dom.setAttribute('tabIndex', -1);
+        this.el.addClass('x-hidden');
+        if(Ext.isIE){ // fix IE 1px bogus margin
+            this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;');
+        }
+        this.wrap = this.el.wrap({
+            cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
+        });
+
+        this.createToolbar(this);
+
+        this.disableItems(true);
+
+        this.tb.doLayout();
+
+        this.createIFrame();
+
+        if(!this.width){
+            var sz = this.el.getSize();
+            this.setSize(sz.width, this.height || sz.height);
+        }
+        this.resizeEl = this.positionEl = this.wrap;
+    },
+
+    createIFrame: function(){
+        var iframe = document.createElement('iframe');
+        iframe.name = Ext.id();
+        iframe.frameBorder = '0';
+        iframe.style.overflow = 'auto';
+
+        this.wrap.dom.appendChild(iframe);
+        this.iframe = iframe;
+
+        this.monitorTask = Ext.TaskMgr.start({
+            run: this.checkDesignMode,
+            scope: this,
+            interval:100
+        });
+    },
+
+    initFrame : function(){
+        Ext.TaskMgr.stop(this.monitorTask);
+        var doc = this.getDoc();
+        this.win = this.getWin();
+
+        doc.open();
+        doc.write(this.getDocMarkup());
+        doc.close();
+
+        var task = { // must defer to wait for browser to be ready
+            run : function(){
+                var doc = this.getDoc();
+                if(doc.body || doc.readyState == 'complete'){
+                    Ext.TaskMgr.stop(task);
+                    this.setDesignMode(true);
+                    this.initEditor.defer(10, this);
+                }
+            },
+            interval : 10,
+            duration:10000,
+            scope: this
+        };
+        Ext.TaskMgr.start(task);
+    },
+
+
+    checkDesignMode : function(){
+        if(this.wrap && this.wrap.dom.offsetWidth){
+            var doc = this.getDoc();
+            if(!doc){
+                return;
+            }
+            if(!doc.editorInitialized || this.getDesignMode() != 'on'){
+                this.initFrame();
+            }
+        }
+    },
+
+    /* private
+     * set current design mode. To enable, mode can be true or 'on', off otherwise
+     */
+    setDesignMode : function(mode){
+        var doc ;
+        if(doc = this.getDoc()){
+            if(this.readOnly){
+                mode = false;
+            }
+            doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off';
+        }
+
+    },
+
+    // private
+    getDesignMode : function(){
+        var doc = this.getDoc();
+        if(!doc){ return ''; }
+        return String(doc.designMode).toLowerCase();
+
+    },
+
+    disableItems: function(disabled){
+        if(this.fontSelect){
+            this.fontSelect.dom.disabled = disabled;
+        }
+        this.tb.items.each(function(item){
+            if(item.getItemId() != 'sourceedit'){
+                item.setDisabled(disabled);
+            }
+        });
+    },
+
+    // private
+    onResize : function(w, h){
+        Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);
+        if(this.el && this.iframe){
+            if(Ext.isNumber(w)){
+                var aw = w - this.wrap.getFrameWidth('lr');
+                this.el.setWidth(aw);
+                this.tb.setWidth(aw);
+                this.iframe.style.width = Math.max(aw, 0) + 'px';
+            }
+            if(Ext.isNumber(h)){
+                var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();
+                this.el.setHeight(ah);
+                this.iframe.style.height = Math.max(ah, 0) + 'px';
+                var bd = this.getEditorBody();
+                if(bd){
+                    bd.style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';
+                }
+            }
+        }
+    },
+
+    /**
+     * Toggles the editor between standard and source edit mode.
+     * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
+     */
+    toggleSourceEdit : function(sourceEditMode){
+        var iframeHeight, elHeight;
+        if(sourceEditMode === undefined){
+            sourceEditMode = !this.sourceEditMode;
+        }
+        this.sourceEditMode = sourceEditMode === true;
+        var btn = this.tb.getComponent('sourceedit');
+
+        if(btn.pressed !== this.sourceEditMode){
+            btn.toggle(this.sourceEditMode);
+            if(!btn.xtbHidden){
+                return;
+            }
+        }
+        if(this.sourceEditMode){
+            // grab the height of the containing panel before we hide the iframe
+            ls = this.getSize();
+
+            iframeHeight = Ext.get(this.iframe).getHeight();
+
+            this.disableItems(true);
+            this.syncValue();
+            this.iframe.className = 'x-hidden';
+            this.el.removeClass('x-hidden');
+            this.el.dom.removeAttribute('tabIndex');
+            this.el.focus();
+            this.el.dom.style.height = iframeHeight + 'px';
+        }else{
+            elHeight = parseInt(this.el.dom.style.height, 10);
+            if(this.initialized){
+                this.disableItems(this.readOnly);
+            }
+            this.pushValue();
+            this.iframe.className = '';
+            this.el.addClass('x-hidden');
+            this.el.dom.setAttribute('tabIndex', -1);
+            this.deferFocus();
+
+            this.setSize(ls);
+            this.iframe.style.height = elHeight + 'px';
+        }
+        this.fireEvent('editmodechange', this, this.sourceEditMode);
+    },
+
+    // private used internally
+    createLink : function(){
+        var url = prompt(this.createLinkText, this.defaultLinkValue);
+        if(url && url != 'http:/'+'/'){
+            this.relayCmd('createlink', url);
+        }
+    },
+
+    // private
+    initEvents : function(){
+        this.originalValue = this.getValue();
+    },
+
+    /**
+     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+     * @method
+     */
+    markInvalid : Ext.emptyFn,
+
+    /**
+     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+     * @method
+     */
+    clearInvalid : Ext.emptyFn,
+
+    // docs inherit from Field
+    setValue : function(v){
+        Ext.form.HtmlEditor.superclass.setValue.call(this, v);
+        this.pushValue();
+        return this;
+    },
+
+    /**
+     * Protected method that will not generally be called directly. If you need/want
+     * custom HTML cleanup, this is the method you should override.
+     * @param {String} html The HTML to be cleaned
+     * @return {String} The cleaned HTML
+     */
+    cleanHtml: function(html) {
+        html = String(html);
+        if(Ext.isWebKit){ // strip safari nonsense
+            html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
+        }
+
+        /*
+         * Neat little hack. Strips out all the non-digit characters from the default
+         * value and compares it to the character code of the first character in the string
+         * because it can cause encoding issues when posted to the server.
+         */
+        if(html.charCodeAt(0) == this.defaultValue.replace(/\D/g, '')){
+            html = html.substring(1);
+        }
+        return html;
+    },
+
+    /**
+     * Protected method that will not generally be called directly. Syncs the contents
+     * of the editor iframe with the textarea.
+     */
+    syncValue : function(){
+        if(this.initialized){
+            var bd = this.getEditorBody();
+            var html = bd.innerHTML;
+            if(Ext.isWebKit){
+                var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
+                var m = bs.match(/text-align:(.*?);/i);
+                if(m && m[1]){
+                    html = '<div style="'+m[0]+'">' + html + '</div>';
+                }
+            }
+            html = this.cleanHtml(html);
+            if(this.fireEvent('beforesync', this, html) !== false){
+                this.el.dom.value = html;
+                this.fireEvent('sync', this, html);
+            }
+        }
+    },
+
+    //docs inherit from Field
+    getValue : function() {
+        this[this.sourceEditMode ? 'pushValue' : 'syncValue']();
+        return Ext.form.HtmlEditor.superclass.getValue.call(this);
+    },
+
+    /**
+     * Protected method that will not generally be called directly. Pushes the value of the textarea
+     * into the iframe editor.
+     */
+    pushValue : function(){
+        if(this.initialized){
+            var v = this.el.dom.value;
+            if(!this.activated && v.length < 1){
+                v = this.defaultValue;
+            }
+            if(this.fireEvent('beforepush', this, v) !== false){
+                this.getEditorBody().innerHTML = v;
+                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);
+                this.fireEvent('push', this, v);
+            }
+
+        }
+    },
+
+    // private
+    deferFocus : function(){
+        this.focus.defer(10, this);
+    },
+
+    // docs inherit from Field
+    focus : function(){
+        if(this.win && !this.sourceEditMode){
+            this.win.focus();
+        }else{
+            this.el.focus();
+        }
+    },
+
+    // private
+    initEditor : function(){
+        //Destroying the component during/before initEditor can cause issues.
+        try{
+            var dbody = this.getEditorBody(),
+                ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat', 'background-color', 'color'),
+                doc,
+                fn;
+
+            ss['background-attachment'] = 'fixed'; // w3c
+            dbody.bgProperties = 'fixed'; // ie
+
+            Ext.DomHelper.applyStyles(dbody, ss);
+
+            doc = this.getDoc();
+
+            if(doc){
+                try{
+                    Ext.EventManager.removeAll(doc);
+                }catch(e){}
+            }
+
+            /*
+             * We need to use createDelegate here, because when using buffer, the delayed task is added
+             * as a property to the function. When the listener is removed, the task is deleted from the function.
+             * Since onEditorEvent is shared on the prototype, if we have multiple html editors, the first time one of the editors
+             * is destroyed, it causes the fn to be deleted from the prototype, which causes errors. Essentially, we're just anonymizing the function.
+             */
+            fn = this.onEditorEvent.createDelegate(this);
+            Ext.EventManager.on(doc, {
+                mousedown: fn,
+                dblclick: fn,
+                click: fn,
+                keyup: fn,
+                buffer:100
+            });
+
+            if(Ext.isGecko){
+                Ext.EventManager.on(doc, 'keypress', this.applyCommand, this);
+            }
+            if(Ext.isIE || Ext.isWebKit || Ext.isOpera){
+                Ext.EventManager.on(doc, 'keydown', this.fixKeys, this);
+            }
+            doc.editorInitialized = true;
+            this.initialized = true;
+            this.pushValue();
+            this.setReadOnly(this.readOnly);
+            this.fireEvent('initialize', this);
+        }catch(e){}
+    },
+
+    // private
+    onDestroy : function(){
+        if(this.monitorTask){
+            Ext.TaskMgr.stop(this.monitorTask);
+        }
+        if(this.rendered){
+            Ext.destroy(this.tb);
+            var doc = this.getDoc();
+            if(doc){
+                try{
+                    Ext.EventManager.removeAll(doc);
+                    for (var prop in doc){
+                        delete doc[prop];
+                    }
+                }catch(e){}
+            }
+            if(this.wrap){
+                this.wrap.dom.innerHTML = '';
+                this.wrap.remove();
+            }
+        }
+
+        if(this.el){
+            this.el.removeAllListeners();
+            this.el.remove();
+        }
+        this.purgeListeners();
+    },
+
+    // private
+    onFirstFocus : function(){
+        this.activated = true;
+        this.disableItems(this.readOnly);
+        if(Ext.isGecko){ // prevent silly gecko errors
+            this.win.focus();
+            var s = this.win.getSelection();
+            if(!s.focusNode || s.focusNode.nodeType != 3){
+                var r = s.getRangeAt(0);
+                r.selectNodeContents(this.getEditorBody());
+                r.collapse(true);
+                this.deferFocus();
+            }
+            try{
+                this.execCmd('useCSS', true);
+                this.execCmd('styleWithCSS', false);
+            }catch(e){}
+        }
+        this.fireEvent('activate', this);
+    },
+
+    // private
+    adjustFont: function(btn){
+        var adjust = btn.getItemId() == 'increasefontsize' ? 1 : -1,
+            doc = this.getDoc(),
+            v = parseInt(doc.queryCommandValue('FontSize') || 2, 10);
+        if((Ext.isSafari && !Ext.isSafari2) || Ext.isChrome || Ext.isAir){
+            // Safari 3 values
+            // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px
+            if(v <= 10){
+                v = 1 + adjust;
+            }else if(v <= 13){
+                v = 2 + adjust;
+            }else if(v <= 16){
+                v = 3 + adjust;
+            }else if(v <= 18){
+                v = 4 + adjust;
+            }else if(v <= 24){
+                v = 5 + adjust;
+            }else {
+                v = 6 + adjust;
+            }
+            v = v.constrain(1, 6);
+        }else{
+            if(Ext.isSafari){ // safari
+                adjust *= 2;
+            }
+            v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);
+        }
+        this.execCmd('FontSize', v);
+    },
+
+    // private
+    onEditorEvent : function(e){
+        this.updateToolbar();
+    },
+
+
+    /**
+     * Protected method that will not generally be called directly. It triggers
+     * a toolbar update by reading the markup state of the current selection in the editor.
+     */
+    updateToolbar: function(){
+
+        if(this.readOnly){
+            return;
+        }
+
+        if(!this.activated){
+            this.onFirstFocus();
+            return;
+        }
+
+        var btns = this.tb.items.map,
+            doc = this.getDoc();
+
+        if(this.enableFont && !Ext.isSafari2){
+            var name = (doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();
+            if(name != this.fontSelect.dom.value){
+                this.fontSelect.dom.value = name;
+            }
+        }
+        if(this.enableFormat){
+            btns.bold.toggle(doc.queryCommandState('bold'));
+            btns.italic.toggle(doc.queryCommandState('italic'));
+            btns.underline.toggle(doc.queryCommandState('underline'));
+        }
+        if(this.enableAlignments){
+            btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));
+            btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));
+            btns.justifyright.toggle(doc.queryCommandState('justifyright'));
+        }
+        if(!Ext.isSafari2 && this.enableLists){
+            btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));
+            btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));
+        }
+
+        Ext.menu.MenuMgr.hideAll();
+
+        this.syncValue();
+    },
+
+    // private
+    relayBtnCmd : function(btn){
+        this.relayCmd(btn.getItemId());
+    },
+
+    /**
+     * Executes a Midas editor command on the editor document and performs necessary focus and
+     * toolbar updates. <b>This should only be called after the editor is initialized.</b>
+     * @param {String} cmd The Midas command
+     * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+     */
+    relayCmd : function(cmd, value){
+        (function(){
+            this.focus();
+            this.execCmd(cmd, value);
+            this.updateToolbar();
+        }).defer(10, this);
+    },
+
+    /**
+     * Executes a Midas editor command directly on the editor document.
+     * For visual commands, you should use {@link #relayCmd} instead.
+     * <b>This should only be called after the editor is initialized.</b>
+     * @param {String} cmd The Midas command
+     * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+     */
+    execCmd : function(cmd, value){
+        var doc = this.getDoc();
+        doc.execCommand(cmd, false, value === undefined ? null : value);
+        this.syncValue();
+    },
+
+    // private
+    applyCommand : function(e){
+        if(e.ctrlKey){
+            var c = e.getCharCode(), cmd;
+            if(c > 0){
+                c = String.fromCharCode(c);
+                switch(c){
+                    case 'b':
+                        cmd = 'bold';
+                    break;
+                    case 'i':
+                        cmd = 'italic';
+                    break;
+                    case 'u':
+                        cmd = 'underline';
+                    break;
+                }
+                if(cmd){
+                    this.win.focus();
+                    this.execCmd(cmd);
+                    this.deferFocus();
+                    e.preventDefault();
+                }
+            }
+        }
+    },
+
+    /**
+     * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
+     * to insert text.
+     * @param {String} text
+     */
+    insertAtCursor : function(text){
+        if(!this.activated){
+            return;
+        }
+        if(Ext.isIE){
+            this.win.focus();
+            var doc = this.getDoc(),
+                r = doc.selection.createRange();
+            if(r){
+                r.pasteHTML(text);
+                this.syncValue();
+                this.deferFocus();
+            }
+        }else{
+            this.win.focus();
+            this.execCmd('InsertHTML', text);
+            this.deferFocus();
+        }
+    },
+
+    // private
+    fixKeys : function(){ // load time branching for fastest keydown performance
+        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('&nbsp;&nbsp;&nbsp;&nbsp;');
+                        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','&nbsp;&nbsp;&nbsp;&nbsp;');
+                    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();
+                    this.execCmd('InsertHtml','<br /><br />');
+                    this.deferFocus();
+                }
+             };
+        }
+    }(),
+
+    /**
+     * Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b>
+     * @return {Ext.Toolbar}
+     */
+    getToolbar : function(){
+        return this.tb;
+    },
+
+    /**
+     * Object collection of toolbar tooltips for the buttons in the editor. The key
+     * is the command id associated with that button and the value is a valid QuickTips object.
+     * For example:
+<pre><code>
+{
+    bold : {
+        title: 'Bold (Ctrl+B)',
+        text: 'Make the selected text bold.',
+        cls: 'x-html-editor-tip'
+    },
+    italic : {
+        title: 'Italic (Ctrl+I)',
+        text: 'Make the selected text italic.',
+        cls: 'x-html-editor-tip'
+    },
+    ...
+</code></pre>
+    * @type Object
+     */
+    buttonTips : {
+        bold : {
+            title: 'Bold (Ctrl+B)',
+            text: 'Make the selected text bold.',
+            cls: 'x-html-editor-tip'
+        },
+        italic : {
+            title: 'Italic (Ctrl+I)',
+            text: 'Make the selected text italic.',
+            cls: 'x-html-editor-tip'
+        },
+        underline : {
+            title: 'Underline (Ctrl+U)',
+            text: 'Underline the selected text.',
+            cls: 'x-html-editor-tip'
+        },
+        increasefontsize : {
+            title: 'Grow Text',
+            text: 'Increase the font size.',
+            cls: 'x-html-editor-tip'
+        },
+        decreasefontsize : {
+            title: 'Shrink Text',
+            text: 'Decrease the font size.',
+            cls: 'x-html-editor-tip'
+        },
+        backcolor : {
+            title: 'Text Highlight Color',
+            text: 'Change the background color of the selected text.',
+            cls: 'x-html-editor-tip'
+        },
+        forecolor : {
+            title: 'Font Color',
+            text: 'Change the color of the selected text.',
+            cls: 'x-html-editor-tip'
+        },
+        justifyleft : {
+            title: 'Align Text Left',
+            text: 'Align text to the left.',
+            cls: 'x-html-editor-tip'
+        },
+        justifycenter : {
+            title: 'Center Text',
+            text: 'Center text in the editor.',
+            cls: 'x-html-editor-tip'
+        },
+        justifyright : {
+            title: 'Align Text Right',
+            text: 'Align text to the right.',
+            cls: 'x-html-editor-tip'
+        },
+        insertunorderedlist : {
+            title: 'Bullet List',
+            text: 'Start a bulleted list.',
+            cls: 'x-html-editor-tip'
+        },
+        insertorderedlist : {
+            title: 'Numbered List',
+            text: 'Start a numbered list.',
+            cls: 'x-html-editor-tip'
+        },
+        createlink : {
+            title: 'Hyperlink',
+            text: 'Make the selected text a hyperlink.',
+            cls: 'x-html-editor-tip'
+        },
+        sourceedit : {
+            title: 'Source Edit',
+            text: 'Switch to source editing mode.',
+            cls: 'x-html-editor-tip'
+        }
+    }
+
+    // hide stuff that is not compatible
+    /**
+     * @event blur
+     * @hide
+     */
+    /**
+     * @event change
+     * @hide
+     */
+    /**
+     * @event focus
+     * @hide
+     */
+    /**
+     * @event specialkey
+     * @hide
+     */
+    /**
+     * @cfg {String} fieldClass @hide
+     */
+    /**
+     * @cfg {String} focusClass @hide
+     */
+    /**
+     * @cfg {String} autoCreate @hide
+     */
+    /**
+     * @cfg {String} inputType @hide
+     */
+    /**
+     * @cfg {String} invalidClass @hide
+     */
+    /**
+     * @cfg {String} invalidText @hide
+     */
+    /**
+     * @cfg {String} msgFx @hide
+     */
+    /**
+     * @cfg {String} validateOnBlur @hide
+     */
+    /**
+     * @cfg {Boolean} allowDomMove  @hide
+     */
+    /**
+     * @cfg {String} applyTo @hide
+     */
+    /**
+     * @cfg {String} autoHeight  @hide
+     */
+    /**
+     * @cfg {String} autoWidth  @hide
+     */
+    /**
+     * @cfg {String} cls  @hide
+     */
+    /**
+     * @cfg {String} disabled  @hide
+     */
+    /**
+     * @cfg {String} disabledClass  @hide
+     */
+    /**
+     * @cfg {String} msgTarget  @hide
+     */
+    /**
+     * @cfg {String} readOnly  @hide
+     */
+    /**
+     * @cfg {String} style  @hide
+     */
+    /**
+     * @cfg {String} validationDelay  @hide
+     */
+    /**
+     * @cfg {String} validationEvent  @hide
+     */
+    /**
+     * @cfg {String} tabIndex  @hide
+     */
+    /**
+     * @property disabled
+     * @hide
+     */
+    /**
+     * @method applyToMarkup
+     * @hide
+     */
+    /**
+     * @method disable
+     * @hide
+     */
+    /**
+     * @method enable
+     * @hide
+     */
+    /**
+     * @method validate
+     * @hide
+     */
+    /**
+     * @event valid
+     * @hide
+     */
+    /**
+     * @method setDisabled
+     * @hide
+     */
+    /**
+     * @cfg keys
+     * @hide
+     */
+});
 Ext.reg('htmleditor', Ext.form.HtmlEditor);
\ No newline at end of file