src/widgets/form/HtmlEditor.js

   1 /*!
   2  * Ext JS Library 3.0.3
   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) ? '&#160;' : '&#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         this.resizeEl = this.positionEl = this.wrap;\r
 406     },\r
 407 \r
 408     createIFrame: function(){\r
 409         var iframe = document.createElement('iframe');\r
 410         iframe.name = Ext.id();\r
 411         iframe.frameBorder = '0';\r
 412         iframe.src = Ext.SSL_SECURE_URL;\r
 413         this.wrap.dom.appendChild(iframe);\r
 414 \r
 415         this.iframe = iframe;\r
 416 \r
 417         this.monitorTask = Ext.TaskMgr.start({\r
 418             run: this.checkDesignMode,\r
 419             scope: this,\r
 420             interval:100\r
 421         });\r
 422     },\r
 423 \r
 424     initFrame : function(){\r
 425         Ext.TaskMgr.stop(this.monitorTask);\r
 426         this.doc = this.getDoc();\r
 427         this.win = this.getWin();\r
 428 \r
 429         this.doc.open();\r
 430         this.doc.write(this.getDocMarkup());\r
 431         this.doc.close();\r
 432 \r
 433         var task = { // must defer to wait for browser to be ready\r
 434             run : function(){\r
 435                 if(this.doc.body || this.doc.readyState == 'complete'){\r
 436                     Ext.TaskMgr.stop(task);\r
 437                     this.doc.designMode="on";\r
 438                     this.initEditor.defer(10, this);\r
 439                 }\r
 440             },\r
 441             interval : 10,\r
 442             duration:10000,\r
 443             scope: this\r
 444         };\r
 445         Ext.TaskMgr.start(task);\r
 446     },\r
 447 \r
 448 \r
 449     checkDesignMode : function(){\r
 450         if(this.wrap && this.wrap.dom.offsetWidth){\r
 451             var doc = this.getDoc();\r
 452             if(!doc){\r
 453                 return;\r
 454             }\r
 455             if(!doc.editorInitialized || String(doc.designMode).toLowerCase() != 'on'){\r
 456                 this.initFrame();\r
 457             }\r
 458         }\r
 459     },\r
 460     \r
 461     disableItems: function(disabled){\r
 462         if(this.fontSelect){\r
 463             this.fontSelect.dom.disabled = disabled;\r
 464         }\r
 465         this.tb.items.each(function(item){\r
 466             if(item.getItemId() != 'sourceedit'){\r
 467                 item.setDisabled(disabled);\r
 468             }\r
 469         });\r
 470     },\r
 471 \r
 472     // private\r
 473     onResize : function(w, h){\r
 474         Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);\r
 475         if(this.el && this.iframe){\r
 476             if(Ext.isNumber(w)){\r
 477                 var aw = w - this.wrap.getFrameWidth('lr');\r
 478                 this.el.setWidth(aw);\r
 479                 this.tb.setWidth(aw);\r
 480                 this.iframe.style.width = Math.max(aw, 0) + 'px';\r
 481             }\r
 482             if(Ext.isNumber(h)){\r
 483                 var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();\r
 484                 this.el.setHeight(ah);\r
 485                 this.iframe.style.height = Math.max(ah, 0) + 'px';\r
 486                 if(this.doc){\r
 487                     this.getEditorBody().style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';\r
 488                 }\r
 489             }\r
 490         }\r
 491     },\r
 492 \r
 493     /**\r
 494      * Toggles the editor between standard and source edit mode.\r
 495      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard\r
 496      */\r
 497     toggleSourceEdit : function(sourceEditMode){\r
 498         if(sourceEditMode === undefined){\r
 499             sourceEditMode = !this.sourceEditMode;\r
 500         }\r
 501         this.sourceEditMode = sourceEditMode === true;\r
 502         var btn = this.tb.items.get('sourceedit');\r
 503         if(btn.pressed !== this.sourceEditMode){\r
 504             btn.toggle(this.sourceEditMode);\r
 505             if(!btn.xtbHidden){\r
 506                 return;\r
 507             }\r
 508         }\r
 509         if(this.sourceEditMode){\r
 510             this.disableItems(true);\r
 511             this.syncValue();\r
 512             this.iframe.className = 'x-hidden';\r
 513             this.el.removeClass('x-hidden');\r
 514             this.el.dom.removeAttribute('tabIndex');\r
 515             this.el.focus();\r
 516         }else{\r
 517             if(this.initialized){\r
 518                 this.disableItems(false);\r
 519             }\r
 520             this.pushValue();\r
 521             this.iframe.className = '';\r
 522             this.el.addClass('x-hidden');\r
 523             this.el.dom.setAttribute('tabIndex', -1);\r
 524             this.deferFocus();\r
 525         }\r
 526         var lastSize = this.lastSize;\r
 527         if(lastSize){\r
 528             delete this.lastSize;\r
 529             this.setSize(lastSize);\r
 530         }\r
 531         this.fireEvent('editmodechange', this, this.sourceEditMode);\r
 532     },\r
 533 \r
 534     // private used internally\r
 535     createLink : function(){\r
 536         var url = prompt(this.createLinkText, this.defaultLinkValue);\r
 537         if(url && url != 'http:/'+'/'){\r
 538             this.relayCmd('createlink', url);\r
 539         }\r
 540     },\r
 541 \r
 542     // private\r
 543     initEvents : function(){\r
 544         this.originalValue = this.getValue();\r
 545     },\r
 546 \r
 547     /**\r
 548      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide\r
 549      * @method\r
 550      */\r
 551     markInvalid : Ext.emptyFn,\r
 552     \r
 553     /**\r
 554      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide\r
 555      * @method\r
 556      */\r
 557     clearInvalid : Ext.emptyFn,\r
 558 \r
 559     // docs inherit from Field\r
 560     setValue : function(v){\r
 561         Ext.form.HtmlEditor.superclass.setValue.call(this, v);\r
 562         this.pushValue();\r
 563         return this;\r
 564     },\r
 565 \r
 566     /**\r
 567      * Protected method that will not generally be called directly. If you need/want\r
 568      * custom HTML cleanup, this is the method you should override.\r
 569      * @param {String} html The HTML to be cleaned\r
 570      * @return {String} The cleaned HTML\r
 571      */\r
 572     cleanHtml: function(html) {\r
 573         html = String(html);\r
 574         if(Ext.isWebKit){ // strip safari nonsense\r
 575             html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');\r
 576         }\r
 577         \r
 578         /*\r
 579          * Neat little hack. Strips out all the non-digit characters from the default\r
 580          * value and compares it to the character code of the first character in the string\r
 581          * because it can cause encoding issues when posted to the server.\r
 582          */\r
 583         if(html.charCodeAt(0) == this.defaultValue.replace(/\D/g, '')){\r
 584             html = html.substring(1);\r
 585         }\r
 586         return html;\r
 587     },\r
 588 \r
 589     /**\r
 590      * Protected method that will not generally be called directly. Syncs the contents\r
 591      * of the editor iframe with the textarea.\r
 592      */\r
 593     syncValue : function(){\r
 594         if(this.initialized){\r
 595             var bd = this.getEditorBody();\r
 596             var html = bd.innerHTML;\r
 597             if(Ext.isWebKit){\r
 598                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!\r
 599                 var m = bs.match(/text-align:(.*?);/i);\r
 600                 if(m && m[1]){\r
 601                     html = '<div style="'+m[0]+'">' + html + '</div>';\r
 602                 }\r
 603             }\r
 604             html = this.cleanHtml(html);\r
 605             if(this.fireEvent('beforesync', this, html) !== false){\r
 606                 this.el.dom.value = html;\r
 607                 this.fireEvent('sync', this, html);\r
 608             }\r
 609         }\r
 610     },\r
 611     \r
 612     //docs inherit from Field\r
 613     getValue : function() {\r
 614         this[this.sourceEditMode ? 'pushValue' : 'syncValue']();\r
 615         return Ext.form.HtmlEditor.superclass.getValue.call(this);\r
 616     },\r
 617 \r
 618     /**\r
 619      * Protected method that will not generally be called directly. Pushes the value of the textarea\r
 620      * into the iframe editor.\r
 621      */\r
 622     pushValue : function(){\r
 623         if(this.initialized){\r
 624             var v = this.el.dom.value;\r
 625             if(!this.activated && v.length < 1){\r
 626                 v = this.defaultValue;\r
 627             }\r
 628             if(this.fireEvent('beforepush', this, v) !== false){\r
 629                 this.getEditorBody().innerHTML = v;\r
 630                 if(Ext.isGecko){\r
 631                     // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8\r
 632                     var d = this.doc,\r
 633                         mode = d.designMode.toLowerCase();\r
 634                     \r
 635                     d.designMode = mode.toggle('on', 'off');\r
 636                     d.designMode = mode;\r
 637                 }\r
 638                 this.fireEvent('push', this, v);\r
 639             }\r
 640         }\r
 641     },\r
 642 \r
 643     // private\r
 644     deferFocus : function(){\r
 645         this.focus.defer(10, this);\r
 646     },\r
 647 \r
 648     // docs inherit from Field\r
 649     focus : function(){\r
 650         if(this.win && !this.sourceEditMode){\r
 651             this.win.focus();\r
 652         }else{\r
 653             this.el.focus();\r
 654         }\r
 655     },\r
 656 \r
 657     // private\r
 658     initEditor : function(){\r
 659         //Destroying the component during/before initEditor can cause issues.\r
 660         try{\r
 661             var dbody = this.getEditorBody();\r
 662             var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');\r
 663             ss['background-attachment'] = 'fixed'; // w3c\r
 664             dbody.bgProperties = 'fixed'; // ie\r
 665 \r
 666             Ext.DomHelper.applyStyles(dbody, ss);\r
 667 \r
 668             if(this.doc){\r
 669                 try{\r
 670                     Ext.EventManager.removeAll(this.doc);\r
 671                 }catch(e){}\r
 672             }\r
 673 \r
 674             this.doc = this.getDoc();\r
 675 \r
 676             Ext.EventManager.on(this.doc, {\r
 677                 'mousedown': this.onEditorEvent,\r
 678                 'dblclick': this.onEditorEvent,\r
 679                 'click': this.onEditorEvent,\r
 680                 'keyup': this.onEditorEvent,\r
 681                 buffer:100,\r
 682                 scope: this\r
 683             });\r
 684 \r
 685             if(Ext.isGecko){\r
 686                 Ext.EventManager.on(this.doc, 'keypress', this.applyCommand, this);\r
 687             }\r
 688             if(Ext.isIE || Ext.isWebKit || Ext.isOpera){\r
 689                 Ext.EventManager.on(this.doc, 'keydown', this.fixKeys, this);\r
 690             }\r
 691             this.initialized = true;\r
 692             this.fireEvent('initialize', this);\r
 693             this.doc.editorInitialized = true;\r
 694             this.pushValue();\r
 695         }catch(e){}\r
 696     },\r
 697 \r
 698     // private\r
 699     onDestroy : function(){\r
 700         if(this.monitorTask){\r
 701             Ext.TaskMgr.stop(this.monitorTask);\r
 702         }\r
 703         if(this.rendered){\r
 704             Ext.destroy(this.tb);\r
 705             if(this.wrap){\r
 706                 this.wrap.dom.innerHTML = '';\r
 707                 this.wrap.remove();\r
 708             }\r
 709         }\r
 710         if(this.el){\r
 711             this.el.removeAllListeners();\r
 712             this.el.remove();\r
 713         }\r
 714  \r
 715         if(this.doc){\r
 716             try{\r
 717                 Ext.EventManager.removeAll(this.doc);\r
 718                 for (var prop in this.doc){\r
 719                    delete this.doc[prop];\r
 720                 }\r
 721             }catch(e){}\r
 722         }\r
 723         this.purgeListeners();\r
 724     },\r
 725 \r
 726     // private\r
 727     onFirstFocus : function(){\r
 728         this.activated = true;\r
 729         this.disableItems(false);\r
 730         if(Ext.isGecko){ // prevent silly gecko errors\r
 731             this.win.focus();\r
 732             var s = this.win.getSelection();\r
 733             if(!s.focusNode || s.focusNode.nodeType != 3){\r
 734                 var r = s.getRangeAt(0);\r
 735                 r.selectNodeContents(this.getEditorBody());\r
 736                 r.collapse(true);\r
 737                 this.deferFocus();\r
 738             }\r
 739             try{\r
 740                 this.execCmd('useCSS', true);\r
 741                 this.execCmd('styleWithCSS', false);\r
 742             }catch(e){}\r
 743         }\r
 744         this.fireEvent('activate', this);\r
 745     },\r
 746 \r
 747     // private\r
 748     adjustFont: function(btn){\r
 749         var adjust = btn.getItemId() == 'increasefontsize' ? 1 : -1;\r
 750 \r
 751         var v = parseInt(this.doc.queryCommandValue('FontSize') || 2, 10);\r
 752         if((Ext.isSafari && !Ext.isSafari2) || Ext.isChrome || Ext.isAir){\r
 753             // Safari 3 values\r
 754             // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px\r
 755             if(v <= 10){\r
 756                 v = 1 + adjust;\r
 757             }else if(v <= 13){\r
 758                 v = 2 + adjust;\r
 759             }else if(v <= 16){\r
 760                 v = 3 + adjust;\r
 761             }else if(v <= 18){\r
 762                 v = 4 + adjust;\r
 763             }else if(v <= 24){\r
 764                 v = 5 + adjust;\r
 765             }else {\r
 766                 v = 6 + adjust;\r
 767             }\r
 768             v = v.constrain(1, 6);\r
 769         }else{\r
 770             if(Ext.isSafari){ // safari\r
 771                 adjust *= 2;\r
 772             }\r
 773             v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);\r
 774         }\r
 775         this.execCmd('FontSize', v);\r
 776     },\r
 777 \r
 778     // private\r
 779     onEditorEvent : function(e){\r
 780         this.updateToolbar();\r
 781     },\r
 782 \r
 783 \r
 784     /**\r
 785      * Protected method that will not generally be called directly. It triggers\r
 786      * a toolbar update by reading the markup state of the current selection in the editor.\r
 787      */\r
 788     updateToolbar: function(){\r
 789 \r
 790         if(!this.activated){\r
 791             this.onFirstFocus();\r
 792             return;\r
 793         }\r
 794 \r
 795         var btns = this.tb.items.map, doc = this.doc;\r
 796 \r
 797         if(this.enableFont && !Ext.isSafari2){\r
 798             var name = (this.doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();\r
 799             if(name != this.fontSelect.dom.value){\r
 800                 this.fontSelect.dom.value = name;\r
 801             }\r
 802         }\r
 803         if(this.enableFormat){\r
 804             btns.bold.toggle(doc.queryCommandState('bold'));\r
 805             btns.italic.toggle(doc.queryCommandState('italic'));\r
 806             btns.underline.toggle(doc.queryCommandState('underline'));\r
 807         }\r
 808         if(this.enableAlignments){\r
 809             btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));\r
 810             btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));\r
 811             btns.justifyright.toggle(doc.queryCommandState('justifyright'));\r
 812         }\r
 813         if(!Ext.isSafari2 && this.enableLists){\r
 814             btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));\r
 815             btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));\r
 816         }\r
 817         \r
 818         Ext.menu.MenuMgr.hideAll();\r
 819 \r
 820         this.syncValue();\r
 821     },\r
 822 \r
 823     // private\r
 824     relayBtnCmd : function(btn){\r
 825         this.relayCmd(btn.getItemId());\r
 826     },\r
 827 \r
 828     /**\r
 829      * Executes a Midas editor command on the editor document and performs necessary focus and\r
 830      * toolbar updates. <b>This should only be called after the editor is initialized.</b>\r
 831      * @param {String} cmd The Midas command\r
 832      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)\r
 833      */\r
 834     relayCmd : function(cmd, value){\r
 835         (function(){\r
 836             this.focus();\r
 837             this.execCmd(cmd, value);\r
 838             this.updateToolbar();\r
 839         }).defer(10, this);\r
 840     },\r
 841 \r
 842     /**\r
 843      * Executes a Midas editor command directly on the editor document.\r
 844      * For visual commands, you should use {@link #relayCmd} instead.\r
 845      * <b>This should only be called after the editor is initialized.</b>\r
 846      * @param {String} cmd The Midas command\r
 847      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)\r
 848      */\r
 849     execCmd : function(cmd, value){\r
 850         this.doc.execCommand(cmd, false, value === undefined ? null : value);\r
 851         this.syncValue();\r
 852     },\r
 853 \r
 854     // private\r
 855     applyCommand : function(e){\r
 856         if(e.ctrlKey){\r
 857             var c = e.getCharCode(), cmd;\r
 858             if(c > 0){\r
 859                 c = String.fromCharCode(c);\r
 860                 switch(c){\r
 861                     case 'b':\r
 862                         cmd = 'bold';\r
 863                     break;\r
 864                     case 'i':\r
 865                         cmd = 'italic';\r
 866                     break;\r
 867                     case 'u':\r
 868                         cmd = 'underline';\r
 869                     break;\r
 870                 }\r
 871                 if(cmd){\r
 872                     this.win.focus();\r
 873                     this.execCmd(cmd);\r
 874                     this.deferFocus();\r
 875                     e.preventDefault();\r
 876                 }\r
 877             }\r
 878         }\r
 879     },\r
 880 \r
 881     /**\r
 882      * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated\r
 883      * to insert text.\r
 884      * @param {String} text\r
 885      */\r
 886     insertAtCursor : function(text){\r
 887         if(!this.activated){\r
 888             return;\r
 889         }\r
 890         if(Ext.isIE){\r
 891             this.win.focus();\r
 892             var r = this.doc.selection.createRange();\r
 893             if(r){\r
 894                 r.collapse(true);\r
 895                 r.pasteHTML(text);\r
 896                 this.syncValue();\r
 897                 this.deferFocus();\r
 898             }\r
 899         }else{\r
 900             this.win.focus();\r
 901             this.execCmd('InsertHTML', text);\r
 902             this.deferFocus();\r
 903         }\r
 904     },\r
 905 \r
 906     // private\r
 907     fixKeys : function(){ // load time branching for fastest keydown performance\r
 908         if(Ext.isIE){\r
 909             return function(e){\r
 910                 var k = e.getKey(), r;\r
 911                 if(k == e.TAB){\r
 912                     e.stopEvent();\r
 913                     r = this.doc.selection.createRange();\r
 914                     if(r){\r
 915                         r.collapse(true);\r
 916                         r.pasteHTML('&nbsp;&nbsp;&nbsp;&nbsp;');\r
 917                         this.deferFocus();\r
 918                     }\r
 919                 }else if(k == e.ENTER){\r
 920                     r = this.doc.selection.createRange();\r
 921                     if(r){\r
 922                         var target = r.parentElement();\r
 923                         if(!target || target.tagName.toLowerCase() != 'li'){\r
 924                             e.stopEvent();\r
 925                             r.pasteHTML('<br />');\r
 926                             r.collapse(false);\r
 927                             r.select();\r
 928                         }\r
 929                     }\r
 930                 }\r
 931             };\r
 932         }else if(Ext.isOpera){\r
 933             return function(e){\r
 934                 var k = e.getKey();\r
 935                 if(k == e.TAB){\r
 936                     e.stopEvent();\r
 937                     this.win.focus();\r
 938                     this.execCmd('InsertHTML','&nbsp;&nbsp;&nbsp;&nbsp;');\r
 939                     this.deferFocus();\r
 940                 }\r
 941             };\r
 942         }else if(Ext.isWebKit){\r
 943             return function(e){\r
 944                 var k = e.getKey();\r
 945                 if(k == e.TAB){\r
 946                     e.stopEvent();\r
 947                     this.execCmd('InsertText','\t');\r
 948                     this.deferFocus();\r
 949                 }else if(k == e.ENTER){\r
 950                     e.stopEvent();\r
 951                     this.execCmd('InsertHtml','<br /><br />');\r
 952                     this.deferFocus();\r
 953                 }\r
 954              };\r
 955         }\r
 956     }(),\r
 957 \r
 958     /**\r
 959      * Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b>\r
 960      * @return {Ext.Toolbar}\r
 961      */\r
 962     getToolbar : function(){\r
 963         return this.tb;\r
 964     },\r
 965 \r
 966     /**\r
 967      * Object collection of toolbar tooltips for the buttons in the editor. The key\r
 968      * is the command id associated with that button and the value is a valid QuickTips object.\r
 969      * For example:\r
 970 <pre><code>\r
 971 {\r
 972     bold : {\r
 973         title: 'Bold (Ctrl+B)',\r
 974         text: 'Make the selected text bold.',\r
 975         cls: 'x-html-editor-tip'\r
 976     },\r
 977     italic : {\r
 978         title: 'Italic (Ctrl+I)',\r
 979         text: 'Make the selected text italic.',\r
 980         cls: 'x-html-editor-tip'\r
 981     },\r
 982     ...\r
 983 </code></pre>\r
 984     * @type Object\r
 985      */\r
 986     buttonTips : {\r
 987         bold : {\r
 988             title: 'Bold (Ctrl+B)',\r
 989             text: 'Make the selected text bold.',\r
 990             cls: 'x-html-editor-tip'\r
 991         },\r
 992         italic : {\r
 993             title: 'Italic (Ctrl+I)',\r
 994             text: 'Make the selected text italic.',\r
 995             cls: 'x-html-editor-tip'\r
 996         },\r
 997         underline : {\r
 998             title: 'Underline (Ctrl+U)',\r
 999             text: 'Underline the selected text.',\r
1000             cls: 'x-html-editor-tip'\r
1001         },\r
1002         increasefontsize : {\r
1003             title: 'Grow Text',\r
1004             text: 'Increase the font size.',\r
1005             cls: 'x-html-editor-tip'\r
1006         },\r
1007         decreasefontsize : {\r
1008             title: 'Shrink Text',\r
1009             text: 'Decrease the font size.',\r
1010             cls: 'x-html-editor-tip'\r
1011         },\r
1012         backcolor : {\r
1013             title: 'Text Highlight Color',\r
1014             text: 'Change the background color of the selected text.',\r
1015             cls: 'x-html-editor-tip'\r
1016         },\r
1017         forecolor : {\r
1018             title: 'Font Color',\r
1019             text: 'Change the color of the selected text.',\r
1020             cls: 'x-html-editor-tip'\r
1021         },\r
1022         justifyleft : {\r
1023             title: 'Align Text Left',\r
1024             text: 'Align text to the left.',\r
1025             cls: 'x-html-editor-tip'\r
1026         },\r
1027         justifycenter : {\r
1028             title: 'Center Text',\r
1029             text: 'Center text in the editor.',\r
1030             cls: 'x-html-editor-tip'\r
1031         },\r
1032         justifyright : {\r
1033             title: 'Align Text Right',\r
1034             text: 'Align text to the right.',\r
1035             cls: 'x-html-editor-tip'\r
1036         },\r
1037         insertunorderedlist : {\r
1038             title: 'Bullet List',\r
1039             text: 'Start a bulleted list.',\r
1040             cls: 'x-html-editor-tip'\r
1041         },\r
1042         insertorderedlist : {\r
1043             title: 'Numbered List',\r
1044             text: 'Start a numbered list.',\r
1045             cls: 'x-html-editor-tip'\r
1046         },\r
1047         createlink : {\r
1048             title: 'Hyperlink',\r
1049             text: 'Make the selected text a hyperlink.',\r
1050             cls: 'x-html-editor-tip'\r
1051         },\r
1052         sourceedit : {\r
1053             title: 'Source Edit',\r
1054             text: 'Switch to source editing mode.',\r
1055             cls: 'x-html-editor-tip'\r
1056         }\r
1057     }\r
1058 \r
1059     // hide stuff that is not compatible\r
1060     /**\r
1061      * @event blur\r
1062      * @hide\r
1063      */\r
1064     /**\r
1065      * @event change\r
1066      * @hide\r
1067      */\r
1068     /**\r
1069      * @event focus\r
1070      * @hide\r
1071      */\r
1072     /**\r
1073      * @event specialkey\r
1074      * @hide\r
1075      */\r
1076     /**\r
1077      * @cfg {String} fieldClass @hide\r
1078      */\r
1079     /**\r
1080      * @cfg {String} focusClass @hide\r
1081      */\r
1082     /**\r
1083      * @cfg {String} autoCreate @hide\r
1084      */\r
1085     /**\r
1086      * @cfg {String} inputType @hide\r
1087      */\r
1088     /**\r
1089      * @cfg {String} invalidClass @hide\r
1090      */\r
1091     /**\r
1092      * @cfg {String} invalidText @hide\r
1093      */\r
1094     /**\r
1095      * @cfg {String} msgFx @hide\r
1096      */\r
1097     /**\r
1098      * @cfg {String} validateOnBlur @hide\r
1099      */\r
1100     /**\r
1101      * @cfg {Boolean} allowDomMove  @hide\r
1102      */\r
1103     /**\r
1104      * @cfg {String} applyTo @hide\r
1105      */\r
1106     /**\r
1107      * @cfg {String} autoHeight  @hide\r
1108      */\r
1109     /**\r
1110      * @cfg {String} autoWidth  @hide\r
1111      */\r
1112     /**\r
1113      * @cfg {String} cls  @hide\r
1114      */\r
1115     /**\r
1116      * @cfg {String} disabled  @hide\r
1117      */\r
1118     /**\r
1119      * @cfg {String} disabledClass  @hide\r
1120      */\r
1121     /**\r
1122      * @cfg {String} msgTarget  @hide\r
1123      */\r
1124     /**\r
1125      * @cfg {String} readOnly  @hide\r
1126      */\r
1127     /**\r
1128      * @cfg {String} style  @hide\r
1129      */\r
1130     /**\r
1131      * @cfg {String} validationDelay  @hide\r
1132      */\r
1133     /**\r
1134      * @cfg {String} validationEvent  @hide\r
1135      */\r
1136     /**\r
1137      * @cfg {String} tabIndex  @hide\r
1138      */\r
1139     /**\r
1140      * @property disabled\r
1141      * @hide\r
1142      */\r
1143     /**\r
1144      * @method applyToMarkup\r
1145      * @hide\r
1146      */\r
1147     /**\r
1148      * @method disable\r
1149      * @hide\r
1150      */\r
1151     /**\r
1152      * @method enable\r
1153      * @hide\r
1154      */\r
1155     /**\r
1156      * @method validate\r
1157      * @hide\r
1158      */\r
1159     /**\r
1160      * @event valid\r
1161      * @hide\r
1162      */\r
1163     /**\r
1164      * @method setDisabled\r
1165      * @hide\r
1166      */\r
1167     /**\r
1168      * @cfg keys\r
1169      * @hide\r
1170      */\r
1171 });\r
1172 Ext.reg('htmleditor', Ext.form.HtmlEditor);