Roo/form/HtmlEditor.js
[roojs1] / Roo / form / HtmlEditor.js
1 //<script type="text/javascript">
2
3 /*
4  * Ext JS Library 1.1.1
5  * Copyright(c) 2006-2007, Ext JS, LLC.
6  * Licence LGPL
7  * 
8  */
9  
10  
11 Roo.form.HtmlEditor = function(config){
12     
13     
14     
15     Roo.form.HtmlEditor.superclass.constructor.call(this, config);
16     
17     if (!this.toolbars) {
18         this.toolbars = [];
19     }
20     this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
21     
22     
23 };
24
25 /**
26  * @class Roo.form.HtmlEditor
27  * @extends Roo.form.Field
28  * Provides a lightweight HTML Editor component.
29  *
30  * This has been tested on Fireforx / Chrome.. IE may not be so great..
31  * 
32  * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
33  * supported by this editor.</b><br/><br/>
34  * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
35  * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
36  */
37 Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
38     /**
39      * @cfg {Boolean} clearUp
40      */
41     clearUp : true,
42       /**
43      * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
44      */
45     toolbars : false,
46    
47      /**
48      * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
49      *                        Roo.resizable.
50      */
51     resizable : false,
52      /**
53      * @cfg {Number} height (in pixels)
54      */   
55     height: 300,
56    /**
57      * @cfg {Number} width (in pixels)
58      */   
59     width: 500,
60     
61     /**
62      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
63      * 
64      */
65     stylesheets: false,
66     
67     
68      /**
69      * @cfg {Array} blacklist of css styles style attributes (blacklist overrides whitelist)
70      * 
71      */
72     cblack: false,
73     /**
74      * @cfg {Array} whitelist of css styles style attributes (blacklist overrides whitelist)
75      * 
76      */
77     cwhite: false,
78     
79      /**
80      * @cfg {Array} blacklist of html tags - in addition to standard blacklist.
81      * 
82      */
83     black: false,
84     /**
85      * @cfg {Array} whitelist of html tags - in addition to statndard whitelist
86      * 
87      */
88     white: false,
89     
90     // id of frame..
91     frameId: false,
92     
93     // private properties
94     validationEvent : false,
95     deferHeight: true,
96     initialized : false,
97     activated : false,
98     
99     onFocus : Roo.emptyFn,
100     iframePad:3,
101     hideMode:'offsets',
102     
103     actionMode : 'container', // defaults to hiding it...
104     
105     defaultAutoCreate : { // modified by initCompnoent..
106         tag: "textarea",
107         style:"width:500px;height:300px;",
108         autocomplete: "off"
109     },
110
111     // private
112     initComponent : function(){
113         this.addEvents({
114             /**
115              * @event initialize
116              * Fires when the editor is fully initialized (including the iframe)
117              * @param {HtmlEditor} this
118              */
119             initialize: true,
120             /**
121              * @event activate
122              * Fires when the editor is first receives the focus. Any insertion must wait
123              * until after this event.
124              * @param {HtmlEditor} this
125              */
126             activate: true,
127              /**
128              * @event beforesync
129              * Fires before the textarea is updated with content from the editor iframe. Return false
130              * to cancel the sync.
131              * @param {HtmlEditor} this
132              * @param {String} html
133              */
134             beforesync: true,
135              /**
136              * @event beforepush
137              * Fires before the iframe editor is updated with content from the textarea. Return false
138              * to cancel the push.
139              * @param {HtmlEditor} this
140              * @param {String} html
141              */
142             beforepush: true,
143              /**
144              * @event sync
145              * Fires when the textarea is updated with content from the editor iframe.
146              * @param {HtmlEditor} this
147              * @param {String} html
148              */
149             sync: true,
150              /**
151              * @event push
152              * Fires when the iframe editor is updated with content from the textarea.
153              * @param {HtmlEditor} this
154              * @param {String} html
155              */
156             push: true,
157              /**
158              * @event editmodechange
159              * Fires when the editor switches edit modes
160              * @param {HtmlEditor} this
161              * @param {Boolean} sourceEdit True if source edit, false if standard editing.
162              */
163             editmodechange: true,
164             /**
165              * @event editorevent
166              * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
167              * @param {HtmlEditor} this
168              */
169             editorevent: true,
170             /**
171              * @event firstfocus
172              * Fires when on first focus - needed by toolbars..
173              * @param {HtmlEditor} this
174              */
175             firstfocus: true,
176             /**
177              * @event autosave
178              * Auto save the htmlEditor value as a file into Events
179              * @param {HtmlEditor} this
180              */
181             autosave: true,
182             /**
183              * @event savedpreview
184              * preview the saved version of htmlEditor
185              * @param {HtmlEditor} this
186              */
187             savedpreview: true
188         });
189         this.defaultAutoCreate =  {
190             tag: "textarea",
191             style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
192             autocomplete: "off"
193         };
194     },
195
196     /**
197      * Protected method that will not generally be called directly. It
198      * is called when the editor creates its toolbar. Override this method if you need to
199      * add custom toolbar buttons.
200      * @param {HtmlEditor} editor
201      */
202     createToolbar : function(editor){
203         Roo.log("create toolbars");
204         if (!editor.toolbars || !editor.toolbars.length) {
205             editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
206         }
207         
208         for (var i =0 ; i < editor.toolbars.length;i++) {
209             editor.toolbars[i] = Roo.factory(
210                     typeof(editor.toolbars[i]) == 'string' ?
211                         { xtype: editor.toolbars[i]} : editor.toolbars[i],
212                 Roo.form.HtmlEditor);
213             editor.toolbars[i].init(editor);
214         }
215          
216         
217     },
218
219      
220     // private
221     onRender : function(ct, position)
222     {
223         var _t = this;
224         Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
225         
226         this.wrap = this.el.wrap({
227             cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
228         });
229         
230         this.editorcore.onRender(ct, position);
231          
232         if (this.resizable) {
233             this.resizeEl = new Roo.Resizable(this.wrap, {
234                 pinned : true,
235                 wrap: true,
236                 dynamic : true,
237                 minHeight : this.height,
238                 height: this.height,
239                 handles : this.resizable,
240                 width: this.width,
241                 listeners : {
242                     resize : function(r, w, h) {
243                         _t.onResize(w,h); // -something
244                     }
245                 }
246             });
247             
248         }
249         this.createToolbar(this);
250        
251         
252         if(!this.width){
253             this.setSize(this.wrap.getSize());
254         }
255         if (this.resizeEl) {
256             this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
257             // should trigger onReize..
258         }
259         Roo.log('el!!!!');
260         Roo.log(this.el);
261         this.keyNav = new Roo.KeyNav(this.el, {
262             
263             "tab" : function(e){
264                 e.preventDefault();
265                 Roo.log('TAB');
266             },
267             
268             "home" : function(e){
269                 e.preventDefault();
270                 Roo.log('HOME');
271                 
272                 var curr = this.el.dom.selectionStart - 1;
273                 var lines = this.getValue().split("\n");
274                 
275                 if(!lines.length){
276                     return;
277                 }
278                 var pos = 0;
279                 
280                 for (var i = 0; i < lines.length;i++) {
281                     
282                     pos += lines[i].length;
283                     
284                     if(pos < curr){
285                         continue;
286                     }
287                     
288                     pos -= lines[i].length + 1;
289                     
290                     break;
291                 }
292                 
293                 this.el.dom.setSelectionRange(pos, pos)
294             },
295             
296             "end" : function(e){
297                 e.preventDefault();
298                 Roo.log('END');
299                 
300                 var curr = this.el.dom.selectionStart - 1;
301                 var lines = this.getValue().split("\n");
302                 
303                 if(!lines.length){
304                     return;
305                 }
306                 var pos = 0;
307                 
308                 for (var i = 0; i < lines.length;i++) {
309                     
310                     pos += lines[i].length;
311                     
312                     if(pos < curr){
313                         continue;
314                     }
315                     
316                     break;
317                 }
318                 
319                 this.el.dom.setSelectionRange(pos, pos)
320             },
321
322             scope : this,
323
324             doRelay : function(foo, bar, hname){
325                 return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
326             },
327
328             forceKeyDown: true
329         });
330         
331 //        if(this.autosave && this.w){
332 //            this.autoSaveFn = setInterval(this.autosave, 1000);
333 //        }
334     },
335
336     // private
337     onResize : function(w, h)
338     {
339         Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
340         var ew = false;
341         var eh = false;
342         
343         if(this.el ){
344             if(typeof w == 'number'){
345                 var aw = w - this.wrap.getFrameWidth('lr');
346                 this.el.setWidth(this.adjustWidth('textarea', aw));
347                 ew = aw;
348             }
349             if(typeof h == 'number'){
350                 var tbh = 0;
351                 for (var i =0; i < this.toolbars.length;i++) {
352                     // fixme - ask toolbars for heights?
353                     tbh += this.toolbars[i].tb.el.getHeight();
354                     if (this.toolbars[i].footer) {
355                         tbh += this.toolbars[i].footer.el.getHeight();
356                     }
357                 }
358                 
359                 
360                 
361                 
362                 var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
363                 ah -= 5; // knock a few pixes off for look..
364                 Roo.log(ah);
365                 this.el.setHeight(this.adjustWidth('textarea', ah));
366                 var eh = ah;
367             }
368         }
369         Roo.log('onResize:' + [w,h,ew,eh].join(',') );
370         this.editorcore.onResize(ew,eh);
371         
372     },
373
374     /**
375      * Toggles the editor between standard and source edit mode.
376      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
377      */
378     toggleSourceEdit : function(sourceEditMode)
379     {
380         this.editorcore.toggleSourceEdit(sourceEditMode);
381         
382         if(this.editorcore.sourceEditMode){
383             Roo.log('editor - showing textarea');
384             
385 //            Roo.log('in');
386 //            Roo.log(this.syncValue());
387             this.editorcore.syncValue();
388             this.el.removeClass('x-hidden');
389             this.el.dom.removeAttribute('tabIndex');
390             this.el.focus();
391             
392             for (var i = 0; i < this.toolbars.length; i++) {
393                 if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
394                     this.toolbars[i].tb.hide();
395                     this.toolbars[i].footer.hide();
396                 }
397             }
398             
399         }else{
400             Roo.log('editor - hiding textarea');
401 //            Roo.log('out')
402 //            Roo.log(this.pushValue()); 
403             this.editorcore.pushValue();
404             
405             this.el.addClass('x-hidden');
406             this.el.dom.setAttribute('tabIndex', -1);
407             
408             for (var i = 0; i < this.toolbars.length; i++) {
409                 if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
410                     this.toolbars[i].tb.show();
411                     this.toolbars[i].footer.show();
412                 }
413             }
414             
415             //this.deferFocus();
416         }
417         
418         this.setSize(this.wrap.getSize());
419         this.onResize(this.wrap.getSize().width, this.wrap.getSize().height);
420         
421         this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
422     },
423  
424     // private (for BoxComponent)
425     adjustSize : Roo.BoxComponent.prototype.adjustSize,
426
427     // private (for BoxComponent)
428     getResizeEl : function(){
429         return this.wrap;
430     },
431
432     // private (for BoxComponent)
433     getPositionEl : function(){
434         return this.wrap;
435     },
436
437     // private
438     initEvents : function(){
439         this.originalValue = this.getValue();
440     },
441
442     /**
443      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
444      * @method
445      */
446     markInvalid : Roo.emptyFn,
447     /**
448      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
449      * @method
450      */
451     clearInvalid : Roo.emptyFn,
452
453     setValue : function(v){
454         Roo.form.HtmlEditor.superclass.setValue.call(this, v);
455         this.editorcore.pushValue();
456     },
457
458      
459     // private
460     deferFocus : function(){
461         this.focus.defer(10, this);
462     },
463
464     // doc'ed in Field
465     focus : function(){
466         this.editorcore.focus();
467         
468     },
469       
470
471     // private
472     onDestroy : function(){
473         
474         
475         
476         if(this.rendered){
477             
478             for (var i =0; i < this.toolbars.length;i++) {
479                 // fixme - ask toolbars for heights?
480                 this.toolbars[i].onDestroy();
481             }
482             
483             this.wrap.dom.innerHTML = '';
484             this.wrap.remove();
485         }
486     },
487
488     // private
489     onFirstFocus : function(){
490         //Roo.log("onFirstFocus");
491         this.editorcore.onFirstFocus();
492          for (var i =0; i < this.toolbars.length;i++) {
493             this.toolbars[i].onFirstFocus();
494         }
495         
496     },
497     
498     // private
499     syncValue : function()
500     {
501         this.editorcore.syncValue();
502     },
503     
504     pushValue : function()
505     {
506         this.editorcore.pushValue();
507     }
508      
509     
510     // hide stuff that is not compatible
511     /**
512      * @event blur
513      * @hide
514      */
515     /**
516      * @event change
517      * @hide
518      */
519     /**
520      * @event focus
521      * @hide
522      */
523     /**
524      * @event specialkey
525      * @hide
526      */
527     /**
528      * @cfg {String} fieldClass @hide
529      */
530     /**
531      * @cfg {String} focusClass @hide
532      */
533     /**
534      * @cfg {String} autoCreate @hide
535      */
536     /**
537      * @cfg {String} inputType @hide
538      */
539     /**
540      * @cfg {String} invalidClass @hide
541      */
542     /**
543      * @cfg {String} invalidText @hide
544      */
545     /**
546      * @cfg {String} msgFx @hide
547      */
548     /**
549      * @cfg {String} validateOnBlur @hide
550      */
551 });
552  
553