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