docs/source/HtmlEditor.html

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