docs/source/HtmlEditor.html

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