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