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