src/widgets/form/HtmlEditor.js

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**\r
   8  * @class Ext.form.HtmlEditor\r
   9  * @extends Ext.form.Field\r
  10  * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be \r
  11  * automatically hidden when needed.  These are noted in the config options where appropriate.\r
  12  * <br><br>The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not \r
  13  * enabled by default unless the global {@link Ext.QuickTips} singleton is {@link Ext.QuickTips#init initialized}.\r
  14  * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT\r
  15  * supported by this editor.</b>\r
  16  * <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
  17  * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.\r
  18  * <br><br>Example usage:\r
  19  * <pre><code>\r
  20 // Simple example rendered with default options:\r
  21 Ext.QuickTips.init();  // enable tooltips\r
  22 new Ext.form.HtmlEditor({\r
  23     renderTo: Ext.getBody(),\r
  24     width: 800,\r
  25     height: 300\r
  26 });\r
  27 \r
  28 // Passed via xtype into a container and with custom options:\r
  29 Ext.QuickTips.init();  // enable tooltips\r
  30 new Ext.Panel({\r
  31     title: 'HTML Editor',\r
  32     renderTo: Ext.getBody(),\r
  33     width: 600,\r
  34     height: 300,\r
  35     frame: true,\r
  36     layout: 'fit',\r
  37     items: {\r
  38         xtype: 'htmleditor',\r
  39         enableColors: false,\r
  40         enableAlignments: false\r
  41     }\r
  42 });\r
  43 </code></pre>\r
  44  * @constructor\r
  45  * Create a new HtmlEditor\r
  46  * @param {Object} config\r
  47  * @xtype htmleditor\r
  48  */\r
  49 \r
  50 Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {\r
  51     /**\r
  52      * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)\r
  53      */\r
  54     enableFormat : true,\r
  55     /**\r
  56      * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)\r
  57      */\r
  58     enableFontSize : true,\r
  59     /**\r
  60      * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)\r
  61      */\r
  62     enableColors : true,\r
  63     /**\r
  64      * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)\r
  65      */\r
  66     enableAlignments : true,\r
  67     /**\r
  68      * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)\r
  69      */\r
  70     enableLists : true,\r
  71     /**\r
  72      * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)\r
  73      */\r
  74     enableSourceEdit : true,\r
  75     /**\r
  76      * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)\r
  77      */\r
  78     enableLinks : true,\r
  79     /**\r
  80      * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)\r
  81      */\r
  82     enableFont : true,\r
  83     /**\r
  84      * @cfg {String} createLinkText The default text for the create link prompt\r
  85      */\r
  86     createLinkText : 'Please enter the URL for the link:',\r
  87     /**\r
  88      * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)\r
  89      */\r
  90     defaultLinkValue : 'http:/'+'/',\r
  91     /**\r
  92      * @cfg {Array} fontFamilies An array of available font families\r
  93      */\r
  94     fontFamilies : [\r
  95         'Arial',\r
  96         'Courier New',\r
  97         'Tahoma',\r
  98         'Times New Roman',\r
  99         'Verdana'\r
 100     ],\r
 101     defaultFont: 'tahoma',\r
 102     /**\r
 103      * @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
 104      */\r
 105     defaultValue: (Ext.isOpera || Ext.isIE6) ? '&nbsp;' : '&#8203;',\r
 106 \r
 107     // private properties\r
 108     actionMode: 'wrap',\r
 109     validationEvent : false,\r
 110     deferHeight: true,\r
 111     initialized : false,\r
 112     activated : false,\r
 113     sourceEditMode : false,\r
 114     onFocus : Ext.emptyFn,\r
 115     iframePad:3,\r
 116     hideMode:'offsets',\r
 117     defaultAutoCreate : {\r
 118         tag: "textarea",\r
 119         style:"width:500px;height:300px;",\r
 120         autocomplete: "off"\r
 121     },\r
 122 \r
 123     // private\r
 124     initComponent : function(){\r
 125         this.addEvents(\r
 126             /**\r
 127              * @event initialize\r
 128              * Fires when the editor is fully initialized (including the iframe)\r
 129              * @param {HtmlEditor} this\r
 130              */\r
 131             'initialize',\r
 132             /**\r
 133              * @event activate\r
 134              * Fires when the editor is first receives the focus. Any insertion must wait\r
 135              * until after this event.\r
 136              * @param {HtmlEditor} this\r
 137              */\r
 138             'activate',\r
 139              /**\r
 140              * @event beforesync\r
 141              * Fires before the textarea is updated with content from the editor iframe. Return false\r
 142              * to cancel the sync.\r
 143              * @param {HtmlEditor} this\r
 144              * @param {String} html\r
 145              */\r
 146             'beforesync',\r
 147              /**\r
 148              * @event beforepush\r
 149              * Fires before the iframe editor is updated with content from the textarea. Return false\r
 150              * to cancel the push.\r
 151              * @param {HtmlEditor} this\r
 152              * @param {String} html\r
 153              */\r
 154             'beforepush',\r
 155              /**\r
 156              * @event sync\r
 157              * Fires when the textarea is updated with content from the editor iframe.\r
 158              * @param {HtmlEditor} this\r
 159              * @param {String} html\r
 160              */\r
 161             'sync',\r
 162              /**\r
 163              * @event push\r
 164              * Fires when the iframe editor is updated with content from the textarea.\r
 165              * @param {HtmlEditor} this\r
 166              * @param {String} html\r
 167              */\r
 168             'push',\r
 169              /**\r
 170              * @event editmodechange\r
 171              * Fires when the editor switches edit modes\r
 172              * @param {HtmlEditor} this\r
 173              * @param {Boolean} sourceEdit True if source edit, false if standard editing.\r
 174              */\r
 175             'editmodechange'\r
 176         )\r
 177     },\r
 178 \r
 179     // private\r
 180     createFontOptions : function(){\r
 181         var buf = [], fs = this.fontFamilies, ff, lc;\r
 182         for(var i = 0, len = fs.length; i< len; i++){\r
 183             ff = fs[i];\r
 184             lc = ff.toLowerCase();\r
 185             buf.push(\r
 186                 '<option value="',lc,'" style="font-family:',ff,';"',\r
 187                     (this.defaultFont == lc ? ' selected="true">' : '>'),\r
 188                     ff,\r
 189                 '</option>'\r
 190             );\r
 191         }\r
 192         return buf.join('');\r
 193     },\r
 194     \r
 195     /*\r
 196      * Protected method that will not generally be called directly. It\r
 197      * is called when the editor creates its toolbar. Override this method if you need to\r
 198      * add custom toolbar buttons.\r
 199      * @param {HtmlEditor} editor\r
 200      */\r
 201     createToolbar : function(editor){\r
 202         \r
 203         var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();\r
 204         \r
 205         function btn(id, toggle, handler){\r
 206             return {\r
 207                 itemId : id,\r
 208                 cls : 'x-btn-icon',\r
 209                 iconCls: 'x-edit-'+id,\r
 210                 enableToggle:toggle !== false,\r
 211                 scope: editor,\r
 212                 handler:handler||editor.relayBtnCmd,\r
 213                 clickEvent:'mousedown',\r
 214                 tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,\r
 215                 overflowText: editor.buttonTips[id].title || undefined,\r
 216                 tabIndex:-1\r
 217             };\r
 218         }\r
 219 \r
 220         // build the toolbar\r
 221         var tb = new Ext.Toolbar({\r
 222             renderTo:this.wrap.dom.firstChild\r
 223         });\r
 224 \r
 225         // stop form submits\r
 226         this.mon(tb.el, 'click', function(e){\r
 227             e.preventDefault();\r
 228         });\r
 229 \r
 230         if(this.enableFont && !Ext.isSafari2){\r
 231             this.fontSelect = tb.el.createChild({\r
 232                 tag:'select',\r
 233                 cls:'x-font-select',\r
 234                 html: this.createFontOptions()\r
 235             });\r
 236             this.mon(this.fontSelect, 'change', function(){\r
 237                 var font = this.fontSelect.dom.value;\r
 238                 this.relayCmd('fontname', font);\r
 239                 this.deferFocus();\r
 240             }, this);\r
 241 \r
 242             tb.add(\r
 243                 this.fontSelect.dom,\r
 244                 '-'\r
 245             );\r
 246         }\r
 247 \r
 248         if(this.enableFormat){\r
 249             tb.add(\r
 250                 btn('bold'),\r
 251                 btn('italic'),\r
 252                 btn('underline')\r
 253             );\r
 254         }\r
 255 \r
 256         if(this.enableFontSize){\r
 257             tb.add(\r
 258                 '-',\r
 259                 btn('increasefontsize', false, this.adjustFont),\r
 260                 btn('decreasefontsize', false, this.adjustFont)\r
 261             );\r
 262         }\r
 263 \r
 264         if(this.enableColors){\r
 265             tb.add(\r
 266                 '-', {\r
 267                     itemId:'forecolor',\r
 268                     cls:'x-btn-icon',\r
 269                     iconCls: 'x-edit-forecolor',\r
 270                     clickEvent:'mousedown',\r
 271                     tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,\r
 272                     tabIndex:-1,\r
 273                     menu : new Ext.menu.ColorMenu({\r
 274                         allowReselect: true,\r
 275                         focus: Ext.emptyFn,\r
 276                         value:'000000',\r
 277                         plain:true,\r
 278                         listeners: {\r
 279                             scope: this,\r
 280                             select: function(cp, color){\r
 281                                 this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);\r
 282                                 this.deferFocus();\r
 283                             }\r
 284                         },\r
 285                         clickEvent:'mousedown'\r
 286                     })\r
 287                 }, {\r
 288                     itemId:'backcolor',\r
 289                     cls:'x-btn-icon',\r
 290                     iconCls: 'x-edit-backcolor',\r
 291                     clickEvent:'mousedown',\r
 292                     tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,\r
 293                     tabIndex:-1,\r
 294                     menu : new Ext.menu.ColorMenu({\r
 295                         focus: Ext.emptyFn,\r
 296                         value:'FFFFFF',\r
 297                         plain:true,\r
 298                         allowReselect: true,\r
 299                         listeners: {\r
 300                             scope: this,\r
 301                             select: function(cp, color){\r
 302                                 if(Ext.isGecko){\r
 303                                     this.execCmd('useCSS', false);\r
 304                                     this.execCmd('hilitecolor', color);\r
 305                                     this.execCmd('useCSS', true);\r
 306                                     this.deferFocus();\r
 307                                 }else{\r
 308                                     this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);\r
 309                                     this.deferFocus();\r
 310                                 }\r
 311                             }\r
 312                         },\r
 313                         clickEvent:'mousedown'\r
 314                     })\r
 315                 }\r
 316             );\r
 317         }\r
 318 \r
 319         if(this.enableAlignments){\r
 320             tb.add(\r
 321                 '-',\r
 322                 btn('justifyleft'),\r
 323                 btn('justifycenter'),\r
 324                 btn('justifyright')\r
 325             );\r
 326         }\r
 327 \r
 328         if(!Ext.isSafari2){\r
 329             if(this.enableLinks){\r
 330                 tb.add(\r
 331                     '-',\r
 332                     btn('createlink', false, this.createLink)\r
 333                 );\r
 334             }\r
 335 \r
 336             if(this.enableLists){\r
 337                 tb.add(\r
 338                     '-',\r
 339                     btn('insertorderedlist'),\r
 340                     btn('insertunorderedlist')\r
 341                 );\r
 342             }\r
 343             if(this.enableSourceEdit){\r
 344                 tb.add(\r
 345                     '-',\r
 346                     btn('sourceedit', true, function(btn){\r
 347                         this.toggleSourceEdit(!this.sourceEditMode);\r
 348                     })\r
 349                 );\r
 350             }\r
 351         }\r
 352 \r
 353         this.tb = tb;\r
 354     },\r
 355 \r
 356     /**\r
 357      * Protected method that will not generally be called directly. It\r
 358      * is called when the editor initializes the iframe with HTML contents. Override this method if you\r
 359      * want to change the initialization markup of the iframe (e.g. to add stylesheets).\r
 360      */\r
 361     getDocMarkup : function(){\r
 362         return '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>';\r
 363     },\r
 364 \r
 365     // private\r
 366     getEditorBody : function(){\r
 367         return this.doc.body || this.doc.documentElement;\r
 368     },\r
 369 \r
 370     // private\r
 371     getDoc : function(){\r
 372         return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);\r
 373     },\r
 374 \r
 375     // private\r
 376     getWin : function(){\r
 377         return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];\r
 378     },\r
 379 \r
 380     // private\r
 381     onRender : function(ct, position){\r
 382         Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);\r
 383         this.el.dom.style.border = '0 none';\r
 384         this.el.dom.setAttribute('tabIndex', -1);\r
 385         this.el.addClass('x-hidden');\r
 386         if(Ext.isIE){ // fix IE 1px bogus margin\r
 387             this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')\r
 388         }\r
 389         this.wrap = this.el.wrap({\r
 390             cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}\r
 391         });\r
 392 \r
 393         this.createToolbar(this);\r
 394 \r
 395         this.disableItems(true);\r
 396         // is this needed?\r
 397         // this.tb.doLayout();\r
 398 \r
 399         this.createIFrame();\r
 400 \r
 401         if(!this.width){\r
 402             var sz = this.el.getSize();\r
 403             this.setSize(sz.width, this.height || sz.height);\r
 404         }\r
 405     },\r
 406 \r
 407     createIFrame: function(){\r
 408         var iframe = document.createElement('iframe');\r
 409         iframe.name = Ext.id();\r
 410         iframe.frameBorder = '0';\r
 411         iframe.src = Ext.isIE ? Ext.SSL_SECURE_URL : "javascript:;";\r
 412         this.wrap.dom.appendChild(iframe);\r
 413 \r
 414         this.iframe = iframe;\r
 415 \r
 416         this.monitorTask = Ext.TaskMgr.start({\r
 417             run: this.checkDesignMode,\r
 418             scope: this,\r
 419             interval:100\r
 420         });\r
 421     },\r
 422 \r
 423     initFrame : function(){\r
 424         Ext.TaskMgr.stop(this.monitorTask);\r
 425         this.doc = this.getDoc();\r
 426         this.win = this.getWin();\r
 427 \r
 428         this.doc.open();\r
 429         this.doc.write(this.getDocMarkup());\r
 430         this.doc.close();\r
 431 \r
 432         var task = { // must defer to wait for browser to be ready\r
 433             run : function(){\r
 434                 if(this.doc.body || this.doc.readyState == 'complete'){\r
 435                     Ext.TaskMgr.stop(task);\r
 436                     this.doc.designMode="on";\r
 437                     this.initEditor.defer(10, this);\r
 438                 }\r
 439             },\r
 440             interval : 10,\r
 441             duration:10000,\r
 442             scope: this\r
 443         };\r
 444         Ext.TaskMgr.start(task);\r
 445     },\r
 446 \r
 447 \r
 448     checkDesignMode : function(){\r
 449         if(this.wrap && this.wrap.dom.offsetWidth){\r
 450             var doc = this.getDoc();\r
 451             if(!doc){\r
 452                 return;\r
 453             }\r
 454             if(!doc.editorInitialized || String(doc.designMode).toLowerCase() != 'on'){\r
 455                 this.initFrame();\r
 456             }\r
 457         }\r
 458     },\r
 459     \r
 460     disableItems: function(disabled){\r
 461         if(this.fontSelect){\r
 462             this.fontSelect.dom.disabled = disabled;\r
 463         }\r
 464         this.tb.items.each(function(item){\r
 465             if(item.itemId != 'sourceedit'){\r
 466                 item.setDisabled(disabled);\r
 467             }\r
 468         });\r
 469     },\r
 470 \r
 471     // private\r
 472     onResize : function(w, h){\r
 473         Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);\r
 474         if(this.el && this.iframe){\r
 475             if(typeof w == 'number'){\r
 476                 var aw = w - this.wrap.getFrameWidth('lr');\r
 477                 this.el.setWidth(this.adjustWidth('textarea', aw));\r
 478                 this.tb.setWidth(aw);\r
 479                 this.iframe.style.width = Math.max(aw, 0) + 'px';\r
 480             }\r
 481             if(typeof h == 'number'){\r
 482                 var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();\r
 483                 this.el.setHeight(this.adjustWidth('textarea', ah));\r
 484                 this.iframe.style.height = Math.max(ah, 0) + 'px';\r
 485                 if(this.doc){\r
 486                     this.getEditorBody().style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';\r
 487                 }\r
 488             }\r
 489         }\r
 490     },\r
 491 \r
 492     /**\r
 493      * Toggles the editor between standard and source edit mode.\r
 494      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard\r
 495      */\r
 496     toggleSourceEdit : function(sourceEditMode){\r
 497         if(sourceEditMode === undefined){\r
 498             sourceEditMode = !this.sourceEditMode;\r
 499         }\r
 500         this.sourceEditMode = sourceEditMode === true;\r
 501         var btn = this.tb.items.get('sourceedit');\r
 502         if(btn.pressed !== this.sourceEditMode){\r
 503             btn.toggle(this.sourceEditMode);\r
 504             if(!btn.xtbHidden){\r
 505                 return;\r
 506             }\r
 507         }\r
 508         if(this.sourceEditMode){\r
 509             this.disableItems(true);\r
 510             this.syncValue();\r
 511             this.iframe.className = 'x-hidden';\r
 512             this.el.removeClass('x-hidden');\r
 513             this.el.dom.removeAttribute('tabIndex');\r
 514             this.el.focus();\r
 515         }else{\r
 516             if(this.initialized){\r
 517                 this.disableItems(false);\r
 518             }\r
 519             this.pushValue();\r
 520             this.iframe.className = '';\r
 521             this.el.addClass('x-hidden');\r
 522             this.el.dom.setAttribute('tabIndex', -1);\r
 523             this.deferFocus();\r
 524         }\r
 525         var lastSize = this.lastSize;\r
 526         if(lastSize){\r
 527             delete this.lastSize;\r
 528             this.setSize(lastSize);\r
 529         }\r
 530         this.fireEvent('editmodechange', this, this.sourceEditMode);\r
 531     },\r
 532 \r
 533     // private used internally\r
 534     createLink : function(){\r
 535         var url = prompt(this.createLinkText, this.defaultLinkValue);\r
 536         if(url && url != 'http:/'+'/'){\r
 537             this.relayCmd('createlink', url);\r
 538         }\r
 539     },\r
 540 \r
 541     // private (for BoxComponent)\r
 542     adjustSize : Ext.BoxComponent.prototype.adjustSize,\r
 543 \r
 544     // private (for BoxComponent)\r
 545     getResizeEl : function(){\r
 546         return this.wrap;\r
 547     },\r
 548 \r
 549     // private (for BoxComponent)\r
 550     getPositionEl : function(){\r
 551         return this.wrap;\r
 552     },\r
 553 \r
 554     // private\r
 555     initEvents : function(){\r
 556         this.originalValue = this.getValue();\r
 557     },\r
 558 \r
 559     /**\r
 560      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide\r
 561      * @method\r
 562      */\r
 563     markInvalid : Ext.emptyFn,\r
 564     \r
 565     /**\r
 566      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide\r
 567      * @method\r
 568      */\r
 569     clearInvalid : Ext.emptyFn,\r
 570 \r
 571     // docs inherit from Field\r
 572     setValue : function(v){\r
 573         Ext.form.HtmlEditor.superclass.setValue.call(this, v);\r
 574         this.pushValue();\r
 575         return this;\r
 576     },\r
 577 \r
 578     /**\r
 579      * Protected method that will not generally be called directly. If you need/want\r
 580      * custom HTML cleanup, this is the method you should override.\r
 581      * @param {String} html The HTML to be cleaned\r
 582      * @return {String} The cleaned HTML\r
 583      */\r
 584     cleanHtml : function(html){\r
 585         html = String(html);\r
 586         if(html.length > 5){\r
 587             if(Ext.isWebKit){ // strip safari nonsense\r
 588                 html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');\r
 589             }\r
 590         }\r
 591         if(html == this.defaultValue){\r
 592             html = '';\r
 593         }\r
 594         return html;\r
 595     },\r
 596 \r
 597     /**\r
 598      * Protected method that will not generally be called directly. Syncs the contents\r
 599      * of the editor iframe with the textarea.\r
 600      */\r
 601     syncValue : function(){\r
 602         if(this.initialized){\r
 603             var bd = this.getEditorBody();\r
 604             var html = bd.innerHTML;\r
 605             if(Ext.isWebKit){\r
 606                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!\r
 607                 var m = bs.match(/text-align:(.*?);/i);\r
 608                 if(m && m[1]){\r
 609                     html = '<div style="'+m[0]+'">' + html + '</div>';\r
 610                 }\r
 611             }\r
 612             html = this.cleanHtml(html);\r
 613             if(this.fireEvent('beforesync', this, html) !== false){\r
 614                 this.el.dom.value = html;\r
 615                 this.fireEvent('sync', this, html);\r
 616             }\r
 617         }\r
 618     },\r
 619     \r
 620     //docs inherit from Field\r
 621     getValue : function() {\r
 622         this[this.sourceEditMode ? 'pushValue' : 'syncValue']();\r
 623         return Ext.form.HtmlEditor.superclass.getValue.call(this);\r
 624     },\r
 625 \r
 626     /**\r
 627      * Protected method that will not generally be called directly. Pushes the value of the textarea\r
 628      * into the iframe editor.\r
 629      */\r
 630     pushValue : function(){\r
 631         if(this.initialized){\r
 632             var v = this.el.dom.value;\r
 633             if(!this.activated && v.length < 1){\r
 634                 v = this.defaultValue;\r
 635             }\r
 636             if(this.fireEvent('beforepush', this, v) !== false){\r
 637                 this.getEditorBody().innerHTML = v;\r
 638                 if(Ext.isGecko){\r
 639                     // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8\r
 640                     var d = this.doc,\r
 641                         mode = d.designMode.toLowerCase();\r
 642                     \r
 643                     d.designMode = mode.toggle('on', 'off');\r
 644                     d.designMode = mode;\r
 645                 }\r
 646                 this.fireEvent('push', this, v);\r
 647             }\r
 648         }\r
 649     },\r
 650 \r
 651     // private\r
 652     deferFocus : function(){\r
 653         this.focus.defer(10, this);\r
 654     },\r
 655 \r
 656     // docs inherit from Field\r
 657     focus : function(){\r
 658         if(this.win && !this.sourceEditMode){\r
 659             this.win.focus();\r
 660         }else{\r
 661             this.el.focus();\r
 662         }\r
 663     },\r
 664 \r
 665     // private\r
 666     initEditor : function(){\r
 667         //Destroying the component during/before initEditor can cause issues.\r
 668         try{\r
 669             var dbody = this.getEditorBody();\r
 670             var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');\r
 671             ss['background-attachment'] = 'fixed'; // w3c\r
 672             dbody.bgProperties = 'fixed'; // ie\r
 673 \r
 674             Ext.DomHelper.applyStyles(dbody, ss);\r
 675 \r
 676             if(this.doc){\r
 677                 try{\r
 678                     Ext.EventManager.removeAll(this.doc);\r
 679                 }catch(e){}\r
 680             }\r
 681 \r
 682             this.doc = this.getDoc();\r
 683 \r
 684             Ext.EventManager.on(this.doc, {\r
 685                 'mousedown': this.onEditorEvent,\r
 686                 'dblclick': this.onEditorEvent,\r
 687                 'click': this.onEditorEvent,\r
 688                 'keyup': this.onEditorEvent,\r
 689                 buffer:100,\r
 690                 scope: this\r
 691             });\r
 692 \r
 693             if(Ext.isGecko){\r
 694                 Ext.EventManager.on(this.doc, 'keypress', this.applyCommand, this);\r
 695             }\r
 696             if(Ext.isIE || Ext.isWebKit || Ext.isOpera){\r
 697                 Ext.EventManager.on(this.doc, 'keydown', this.fixKeys, this);\r
 698             }\r
 699             this.initialized = true;\r
 700             this.fireEvent('initialize', this);\r
 701             this.doc.editorInitialized = true;\r
 702             this.pushValue();\r
 703         }catch(e){}\r
 704     },\r
 705 \r
 706     // private\r
 707     onDestroy : function(){\r
 708         if(this.monitorTask){\r
 709             Ext.TaskMgr.stop(this.monitorTask);\r
 710         }\r
 711         if(this.rendered){\r
 712             Ext.destroy(this.tb);\r
 713             if(this.wrap){\r
 714                 this.wrap.dom.innerHTML = '';\r
 715                 this.wrap.remove();\r
 716             }\r
 717         }\r
 718         if(this.el){\r
 719             this.el.removeAllListeners();\r
 720             this.el.remove();\r
 721         }\r
 722  \r
 723         if(this.doc){\r
 724             try{\r
 725                 Ext.EventManager.removeAll(this.doc);\r
 726                 for (var prop in this.doc){\r
 727                    delete this.doc[prop];\r
 728                 }\r
 729             }catch(e){}\r
 730         }\r
 731         this.purgeListeners();\r
 732     },\r
 733 \r
 734     // private\r
 735     onFirstFocus : function(){\r
 736         this.activated = true;\r
 737         this.disableItems(false);\r
 738         if(Ext.isGecko){ // prevent silly gecko errors\r
 739             this.win.focus();\r
 740             var s = this.win.getSelection();\r
 741             if(!s.focusNode || s.focusNode.nodeType != 3){\r
 742                 var r = s.getRangeAt(0);\r
 743                 r.selectNodeContents(this.getEditorBody());\r
 744                 r.collapse(true);\r
 745                 this.deferFocus();\r
 746             }\r
 747             try{\r
 748                 this.execCmd('useCSS', true);\r
 749                 this.execCmd('styleWithCSS', false);\r
 750             }catch(e){}\r
 751         }\r
 752         this.fireEvent('activate', this);\r
 753     },\r
 754 \r
 755     // private\r
 756     adjustFont: function(btn){\r
 757         var adjust = btn.itemId == 'increasefontsize' ? 1 : -1;\r
 758 \r
 759         var v = parseInt(this.doc.queryCommandValue('FontSize') || 2, 10);\r
 760         if((Ext.isSafari && !Ext.isSafari2) || Ext.isChrome || Ext.isAir){\r
 761             // Safari 3 values\r
 762             // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px\r
 763             if(v <= 10){\r
 764                 v = 1 + adjust;\r
 765             }else if(v <= 13){\r
 766                 v = 2 + adjust;\r
 767             }else if(v <= 16){\r
 768                 v = 3 + adjust;\r
 769             }else if(v <= 18){\r
 770                 v = 4 + adjust;\r
 771             }else if(v <= 24){\r
 772                 v = 5 + adjust;\r
 773             }else {\r
 774                 v = 6 + adjust;\r
 775             }\r
 776             v = v.constrain(1, 6);\r
 777         }else{\r
 778             if(Ext.isSafari){ // safari\r
 779                 adjust *= 2;\r
 780             }\r
 781             v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);\r
 782         }\r
 783         this.execCmd('FontSize', v);\r
 784     },\r
 785 \r
 786     // private\r
 787     onEditorEvent : function(e){\r
 788         this.updateToolbar();\r
 789     },\r
 790 \r
 791 \r
 792     /**\r
 793      * Protected method that will not generally be called directly. It triggers\r
 794      * a toolbar update by reading the markup state of the current selection in the editor.\r
 795      */\r
 796     updateToolbar: function(){\r
 797 \r
 798         if(!this.activated){\r
 799             this.onFirstFocus();\r
 800             return;\r
 801         }\r
 802 \r
 803         var btns = this.tb.items.map, doc = this.doc;\r
 804 \r
 805         if(this.enableFont && !Ext.isSafari2){\r
 806             var name = (this.doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();\r
 807             if(name != this.fontSelect.dom.value){\r
 808                 this.fontSelect.dom.value = name;\r
 809             }\r
 810         }\r
 811         if(this.enableFormat){\r
 812             btns.bold.toggle(doc.queryCommandState('bold'));\r
 813             btns.italic.toggle(doc.queryCommandState('italic'));\r
 814             btns.underline.toggle(doc.queryCommandState('underline'));\r
 815         }\r
 816         if(this.enableAlignments){\r
 817             btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));\r
 818             btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));\r
 819             btns.justifyright.toggle(doc.queryCommandState('justifyright'));\r
 820         }\r
 821         if(!Ext.isSafari2 && this.enableLists){\r
 822             btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));\r
 823             btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));\r
 824         }\r
 825         \r
 826         Ext.menu.MenuMgr.hideAll();\r
 827 \r
 828         this.syncValue();\r
 829     },\r
 830 \r
 831     // private\r
 832     relayBtnCmd : function(btn){\r
 833         this.relayCmd(btn.itemId);\r
 834     },\r
 835 \r
 836     /**\r
 837      * Executes a Midas editor command on the editor document and performs necessary focus and\r
 838      * toolbar updates. <b>This should only be called after the editor is initialized.</b>\r
 839      * @param {String} cmd The Midas command\r
 840      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)\r
 841      */\r
 842     relayCmd : function(cmd, value){\r
 843         (function(){\r
 844             this.focus();\r
 845             this.execCmd(cmd, value);\r
 846             this.updateToolbar();\r
 847         }).defer(10, this);\r
 848     },\r
 849 \r
 850     /**\r
 851      * Executes a Midas editor command directly on the editor document.\r
 852      * For visual commands, you should use {@link #relayCmd} instead.\r
 853      * <b>This should only be called after the editor is initialized.</b>\r
 854      * @param {String} cmd The Midas command\r
 855      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)\r
 856      */\r
 857     execCmd : function(cmd, value){\r
 858         this.doc.execCommand(cmd, false, value === undefined ? null : value);\r
 859         this.syncValue();\r
 860     },\r
 861 \r
 862     // private\r
 863     applyCommand : function(e){\r
 864         if(e.ctrlKey){\r
 865             var c = e.getCharCode(), cmd;\r
 866             if(c > 0){\r
 867                 c = String.fromCharCode(c);\r
 868                 switch(c){\r
 869                     case 'b':\r
 870                         cmd = 'bold';\r
 871                     break;\r
 872                     case 'i':\r
 873                         cmd = 'italic';\r
 874                     break;\r
 875                     case 'u':\r
 876                         cmd = 'underline';\r
 877                     break;\r
 878                 }\r
 879                 if(cmd){\r
 880                     this.win.focus();\r
 881                     this.execCmd(cmd);\r
 882                     this.deferFocus();\r
 883                     e.preventDefault();\r
 884                 }\r
 885             }\r
 886         }\r
 887     },\r
 888 \r
 889     /**\r
 890      * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated\r
 891      * to insert text.\r
 892      * @param {String} text\r
 893      */\r
 894     insertAtCursor : function(text){\r
 895         if(!this.activated){\r
 896             return;\r
 897         }\r
 898         if(Ext.isIE){\r
 899             this.win.focus();\r
 900             var r = this.doc.selection.createRange();\r
 901             if(r){\r
 902                 r.collapse(true);\r
 903                 r.pasteHTML(text);\r
 904                 this.syncValue();\r
 905                 this.deferFocus();\r
 906             }\r
 907         }else if(Ext.isGecko || Ext.isOpera){\r
 908             this.win.focus();\r
 909             this.execCmd('InsertHTML', text);\r
 910             this.deferFocus();\r
 911         }else if(Ext.isWebKit){\r
 912             this.execCmd('InsertText', text);\r
 913             this.deferFocus();\r
 914         }\r
 915     },\r
 916 \r
 917     // private\r
 918     fixKeys : function(){ // load time branching for fastest keydown performance\r
 919         if(Ext.isIE){\r
 920             return function(e){\r
 921                 var k = e.getKey(), r;\r
 922                 if(k == e.TAB){\r
 923                     e.stopEvent();\r
 924                     r = this.doc.selection.createRange();\r
 925                     if(r){\r
 926                         r.collapse(true);\r
 927                         r.pasteHTML('&nbsp;&nbsp;&nbsp;&nbsp;');\r
 928                         this.deferFocus();\r
 929                     }\r
 930                 }else if(k == e.ENTER){\r
 931                     r = this.doc.selection.createRange();\r
 932                     if(r){\r
 933                         var target = r.parentElement();\r
 934                         if(!target || target.tagName.toLowerCase() != 'li'){\r
 935                             e.stopEvent();\r
 936                             r.pasteHTML('<br />');\r
 937                             r.collapse(false);\r
 938                             r.select();\r
 939                         }\r
 940                     }\r
 941                 }\r
 942             };\r
 943         }else if(Ext.isOpera){\r
 944             return function(e){\r
 945                 var k = e.getKey();\r
 946                 if(k == e.TAB){\r
 947                     e.stopEvent();\r
 948                     this.win.focus();\r
 949                     this.execCmd('InsertHTML','&nbsp;&nbsp;&nbsp;&nbsp;');\r
 950                     this.deferFocus();\r
 951                 }\r
 952             };\r
 953         }else if(Ext.isWebKit){\r
 954             return function(e){\r
 955                 var k = e.getKey();\r
 956                 if(k == e.TAB){\r
 957                     e.stopEvent();\r
 958                     this.execCmd('InsertText','\t');\r
 959                     this.deferFocus();\r
 960                 }\r
 961              };\r
 962         }\r
 963     }(),\r
 964 \r
 965     /**\r
 966      * Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b>\r
 967      * @return {Ext.Toolbar}\r
 968      */\r
 969     getToolbar : function(){\r
 970         return this.tb;\r
 971     },\r
 972 \r
 973     /**\r
 974      * Object collection of toolbar tooltips for the buttons in the editor. The key\r
 975      * is the command id associated with that button and the value is a valid QuickTips object.\r
 976      * For example:\r
 977 <pre><code>\r
 978 {\r
 979     bold : {\r
 980         title: 'Bold (Ctrl+B)',\r
 981         text: 'Make the selected text bold.',\r
 982         cls: 'x-html-editor-tip'\r
 983     },\r
 984     italic : {\r
 985         title: 'Italic (Ctrl+I)',\r
 986         text: 'Make the selected text italic.',\r
 987         cls: 'x-html-editor-tip'\r
 988     },\r
 989     ...\r
 990 </code></pre>\r
 991     * @type Object\r
 992      */\r
 993     buttonTips : {\r
 994         bold : {\r
 995             title: 'Bold (Ctrl+B)',\r
 996             text: 'Make the selected text bold.',\r
 997             cls: 'x-html-editor-tip'\r
 998         },\r
 999         italic : {\r
1000             title: 'Italic (Ctrl+I)',\r
1001             text: 'Make the selected text italic.',\r
1002             cls: 'x-html-editor-tip'\r
1003         },\r
1004         underline : {\r
1005             title: 'Underline (Ctrl+U)',\r
1006             text: 'Underline the selected text.',\r
1007             cls: 'x-html-editor-tip'\r
1008         },\r
1009         increasefontsize : {\r
1010             title: 'Grow Text',\r
1011             text: 'Increase the font size.',\r
1012             cls: 'x-html-editor-tip'\r
1013         },\r
1014         decreasefontsize : {\r
1015             title: 'Shrink Text',\r
1016             text: 'Decrease the font size.',\r
1017             cls: 'x-html-editor-tip'\r
1018         },\r
1019         backcolor : {\r
1020             title: 'Text Highlight Color',\r
1021             text: 'Change the background color of the selected text.',\r
1022             cls: 'x-html-editor-tip'\r
1023         },\r
1024         forecolor : {\r
1025             title: 'Font Color',\r
1026             text: 'Change the color of the selected text.',\r
1027             cls: 'x-html-editor-tip'\r
1028         },\r
1029         justifyleft : {\r
1030             title: 'Align Text Left',\r
1031             text: 'Align text to the left.',\r
1032             cls: 'x-html-editor-tip'\r
1033         },\r
1034         justifycenter : {\r
1035             title: 'Center Text',\r
1036             text: 'Center text in the editor.',\r
1037             cls: 'x-html-editor-tip'\r
1038         },\r
1039         justifyright : {\r
1040             title: 'Align Text Right',\r
1041             text: 'Align text to the right.',\r
1042             cls: 'x-html-editor-tip'\r
1043         },\r
1044         insertunorderedlist : {\r
1045             title: 'Bullet List',\r
1046             text: 'Start a bulleted list.',\r
1047             cls: 'x-html-editor-tip'\r
1048         },\r
1049         insertorderedlist : {\r
1050             title: 'Numbered List',\r
1051             text: 'Start a numbered list.',\r
1052             cls: 'x-html-editor-tip'\r
1053         },\r
1054         createlink : {\r
1055             title: 'Hyperlink',\r
1056             text: 'Make the selected text a hyperlink.',\r
1057             cls: 'x-html-editor-tip'\r
1058         },\r
1059         sourceedit : {\r
1060             title: 'Source Edit',\r
1061             text: 'Switch to source editing mode.',\r
1062             cls: 'x-html-editor-tip'\r
1063         }\r
1064     }\r
1065 \r
1066     // hide stuff that is not compatible\r
1067     /**\r
1068      * @event blur\r
1069      * @hide\r
1070      */\r
1071     /**\r
1072      * @event change\r
1073      * @hide\r
1074      */\r
1075     /**\r
1076      * @event focus\r
1077      * @hide\r
1078      */\r
1079     /**\r
1080      * @event specialkey\r
1081      * @hide\r
1082      */\r
1083     /**\r
1084      * @cfg {String} fieldClass @hide\r
1085      */\r
1086     /**\r
1087      * @cfg {String} focusClass @hide\r
1088      */\r
1089     /**\r
1090      * @cfg {String} autoCreate @hide\r
1091      */\r
1092     /**\r
1093      * @cfg {String} inputType @hide\r
1094      */\r
1095     /**\r
1096      * @cfg {String} invalidClass @hide\r
1097      */\r
1098     /**\r
1099      * @cfg {String} invalidText @hide\r
1100      */\r
1101     /**\r
1102      * @cfg {String} msgFx @hide\r
1103      */\r
1104     /**\r
1105      * @cfg {String} validateOnBlur @hide\r
1106      */\r
1107     /**\r
1108      * @cfg {Boolean} allowDomMove  @hide\r
1109      */\r
1110     /**\r
1111      * @cfg {String} applyTo @hide\r
1112      */\r
1113     /**\r
1114      * @cfg {String} autoHeight  @hide\r
1115      */\r
1116     /**\r
1117      * @cfg {String} autoWidth  @hide\r
1118      */\r
1119     /**\r
1120      * @cfg {String} cls  @hide\r
1121      */\r
1122     /**\r
1123      * @cfg {String} disabled  @hide\r
1124      */\r
1125     /**\r
1126      * @cfg {String} disabledClass  @hide\r
1127      */\r
1128     /**\r
1129      * @cfg {String} msgTarget  @hide\r
1130      */\r
1131     /**\r
1132      * @cfg {String} readOnly  @hide\r
1133      */\r
1134     /**\r
1135      * @cfg {String} style  @hide\r
1136      */\r
1137     /**\r
1138      * @cfg {String} validationDelay  @hide\r
1139      */\r
1140     /**\r
1141      * @cfg {String} validationEvent  @hide\r
1142      */\r
1143     /**\r
1144      * @cfg {String} tabIndex  @hide\r
1145      */\r
1146     /**\r
1147      * @property disabled\r
1148      * @hide\r
1149      */\r
1150     /**\r
1151      * @method applyToMarkup\r
1152      * @hide\r
1153      */\r
1154     /**\r
1155      * @method disable\r
1156      * @hide\r
1157      */\r
1158     /**\r
1159      * @method enable\r
1160      * @hide\r
1161      */\r
1162     /**\r
1163      * @method validate\r
1164      * @hide\r
1165      */\r
1166     /**\r
1167      * @event valid\r
1168      * @hide\r
1169      */\r
1170     /**\r
1171      * @method setDisabled\r
1172      * @hide\r
1173      */\r
1174     /**\r
1175      * @cfg keys\r
1176      * @hide\r
1177      */\r
1178 });\r
1179 Ext.reg('htmleditor', Ext.form.HtmlEditor);