Roo/HtmlEditorCore.js
[roojs1] / Roo / HtmlEditorCore.js
1 //<script type="text/javascript">
2
3 /*
4  * Based  Ext JS Library 1.1.1
5  * Copyright(c) 2006-2007, Ext JS, LLC.
6  * LGPL
7  *
8  */
9  
10 /**
11  * @class Roo.HtmlEditorCore
12  * @extends Roo.Component
13  * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
14  *
15  * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
16  */
17
18 Roo.HtmlEditorCore = function(config){
19     
20     
21     Roo.HtmlEditorCore.superclass.constructor.call(this, config);
22     
23     
24     this.addEvents({
25         /**
26          * @event initialize
27          * Fires when the editor is fully initialized (including the iframe)
28          * @param {Roo.HtmlEditorCore} this
29          */
30         initialize: true,
31         /**
32          * @event activate
33          * Fires when the editor is first receives the focus. Any insertion must wait
34          * until after this event.
35          * @param {Roo.HtmlEditorCore} this
36          */
37         activate: true,
38          /**
39          * @event beforesync
40          * Fires before the textarea is updated with content from the editor iframe. Return false
41          * to cancel the sync.
42          * @param {Roo.HtmlEditorCore} this
43          * @param {String} html
44          */
45         beforesync: true,
46          /**
47          * @event beforepush
48          * Fires before the iframe editor is updated with content from the textarea. Return false
49          * to cancel the push.
50          * @param {Roo.HtmlEditorCore} this
51          * @param {String} html
52          */
53         beforepush: true,
54          /**
55          * @event sync
56          * Fires when the textarea is updated with content from the editor iframe.
57          * @param {Roo.HtmlEditorCore} this
58          * @param {String} html
59          */
60         sync: true,
61          /**
62          * @event push
63          * Fires when the iframe editor is updated with content from the textarea.
64          * @param {Roo.HtmlEditorCore} this
65          * @param {String} html
66          */
67         push: true,
68         
69         /**
70          * @event editorevent
71          * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
72          * @param {Roo.HtmlEditorCore} this
73          */
74         editorevent: true
75         
76     });
77     
78     // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
79     
80     // defaults : white / black...
81     this.applyBlacklists();
82     
83     
84     
85 };
86
87
88 Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
89
90
91      /**
92      * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field 
93      */
94     
95     owner : false,
96     
97      /**
98      * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
99      *                        Roo.resizable.
100      */
101     resizable : false,
102      /**
103      * @cfg {Number} height (in pixels)
104      */   
105     height: 300,
106    /**
107      * @cfg {Number} width (in pixels)
108      */   
109     width: 500,
110     
111     /**
112      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
113      * 
114      */
115     stylesheets: false,
116     
117     // id of frame..
118     frameId: false,
119     
120     // private properties
121     validationEvent : false,
122     deferHeight: true,
123     initialized : false,
124     activated : false,
125     sourceEditMode : false,
126     onFocus : Roo.emptyFn,
127     iframePad:3,
128     hideMode:'offsets',
129     
130     clearUp: true,
131     
132     // blacklist + whitelisted elements..
133     black: false,
134     white: false,
135      
136     bodyCls : '',
137
138     /**
139      * Protected method that will not generally be called directly. It
140      * is called when the editor initializes the iframe with HTML contents. Override this method if you
141      * want to change the initialization markup of the iframe (e.g. to add stylesheets).
142      */
143     getDocMarkup : function(){
144         // body styles..
145         var st = '';
146         
147         // inherit styels from page...?? 
148         if (this.stylesheets === false) {
149             
150             Roo.get(document.head).select('style').each(function(node) {
151                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
152             });
153             
154             Roo.get(document.head).select('link').each(function(node) { 
155                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
156             });
157             
158         } else if (!this.stylesheets.length) {
159                 // simple..
160                 st = '<style type="text/css">' +
161                     'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
162                    '</style>';
163         } else { 
164             st = '<style type="text/css">' +
165                     this.stylesheets +
166                 '</style>';
167         }
168         
169         st +=  '<style type="text/css">' +
170             'IMG { cursor: pointer } ' +
171         '</style>';
172
173         var cls = 'roo-htmleditor-body';
174         
175         if(this.bodyCls.length){
176             cls += ' ' + this.bodyCls;
177         }
178         
179         return '<html><head>' + st  +
180             //<style type="text/css">' +
181             //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
182             //'</style>' +
183             ' </head><body class="' +  cls + '"></body></html>';
184     },
185
186     // private
187     onRender : function(ct, position)
188     {
189         var _t = this;
190         //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
191         this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
192         
193         
194         this.el.dom.style.border = '0 none';
195         this.el.dom.setAttribute('tabIndex', -1);
196         this.el.addClass('x-hidden hide');
197         
198         
199         
200         if(Roo.isIE){ // fix IE 1px bogus margin
201             this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
202         }
203        
204         
205         this.frameId = Roo.id();
206         
207          
208         
209         var iframe = this.owner.wrap.createChild({
210             tag: 'iframe',
211             cls: 'form-control', // bootstrap..
212             id: this.frameId,
213             name: this.frameId,
214             frameBorder : 'no',
215             'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL  :  "javascript:false"
216         }, this.el
217         );
218         
219         
220         this.iframe = iframe.dom;
221
222          this.assignDocWin();
223         
224         this.doc.designMode = 'on';
225        
226         this.doc.open();
227         this.doc.write(this.getDocMarkup());
228         this.doc.close();
229
230         
231         var task = { // must defer to wait for browser to be ready
232             run : function(){
233                 //console.log("run task?" + this.doc.readyState);
234                 this.assignDocWin();
235                 if(this.doc.body || this.doc.readyState == 'complete'){
236                     try {
237                         this.doc.designMode="on";
238                     } catch (e) {
239                         return;
240                     }
241                     Roo.TaskMgr.stop(task);
242                     this.initEditor.defer(10, this);
243                 }
244             },
245             interval : 10,
246             duration: 10000,
247             scope: this
248         };
249         Roo.TaskMgr.start(task);
250
251     },
252
253     // private
254     onResize : function(w, h)
255     {
256          Roo.log('resize: ' +w + ',' + h );
257         //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
258         if(!this.iframe){
259             return;
260         }
261         if(typeof w == 'number'){
262             
263             this.iframe.style.width = w + 'px';
264         }
265         if(typeof h == 'number'){
266             
267             this.iframe.style.height = h + 'px';
268             if(this.doc){
269                 (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
270             }
271         }
272         
273     },
274
275     /**
276      * Toggles the editor between standard and source edit mode.
277      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
278      */
279     toggleSourceEdit : function(sourceEditMode){
280         
281         this.sourceEditMode = sourceEditMode === true;
282         
283         if(this.sourceEditMode){
284  
285             Roo.get(this.iframe).addClass(['x-hidden','hide']);     //FIXME - what's the BS styles for these
286             
287         }else{
288             Roo.get(this.iframe).removeClass(['x-hidden','hide']);
289             //this.iframe.className = '';
290             this.deferFocus();
291         }
292         //this.setSize(this.owner.wrap.getSize());
293         //this.fireEvent('editmodechange', this, this.sourceEditMode);
294     },
295
296     
297   
298
299     /**
300      * Protected method that will not generally be called directly. If you need/want
301      * custom HTML cleanup, this is the method you should override.
302      * @param {String} html The HTML to be cleaned
303      * return {String} The cleaned HTML
304      */
305     cleanHtml : function(html){
306         html = String(html);
307         if(html.length > 5){
308             if(Roo.isSafari){ // strip safari nonsense
309                 html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
310             }
311         }
312         if(html == '&nbsp;'){
313             html = '';
314         }
315         return html;
316     },
317
318     /**
319      * HTML Editor -> Textarea
320      * Protected method that will not generally be called directly. Syncs the contents
321      * of the editor iframe with the textarea.
322      */
323     syncValue : function(){
324         if(this.initialized){
325             var bd = (this.doc.body || this.doc.documentElement);
326             //this.cleanUpPaste(); -- this is done else where and causes havoc..
327             var html = bd.innerHTML;
328             if(Roo.isSafari){
329                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
330                 var m = bs ? bs.match(/text-align:(.*?);/i) : false;
331                 if(m && m[1]){
332                     html = '<div style="'+m[0]+'">' + html + '</div>';
333                 }
334             }
335             html = this.cleanHtml(html);
336             // fix up the special chars.. normaly like back quotes in word...
337             // however we do not want to do this with chinese..
338             html = html.replace(/([\x80-\uffff])/g, function (a, b) {
339                 var cc = b.charCodeAt();
340                 if (
341                     (cc >= 0x4E00 && cc < 0xA000 ) ||
342                     (cc >= 0x3400 && cc < 0x4E00 ) ||
343                     (cc >= 0xf900 && cc < 0xfb00 )
344                 ) {
345                         return b;
346                 }
347                 return "&#"+cc+";" 
348             });
349             if(this.owner.fireEvent('beforesync', this, html) !== false){
350                 this.el.dom.value = html;
351                 this.owner.fireEvent('sync', this, html);
352             }
353         }
354     },
355
356     /**
357      * Protected method that will not generally be called directly. Pushes the value of the textarea
358      * into the iframe editor.
359      */
360     pushValue : function(){
361         if(this.initialized){
362             var v = this.el.dom.value.trim();
363             
364 //            if(v.length < 1){
365 //                v = '&#160;';
366 //            }
367             
368             if(this.owner.fireEvent('beforepush', this, v) !== false){
369                 var d = (this.doc.body || this.doc.documentElement);
370                 d.innerHTML = v;
371                 this.cleanUpPaste();
372                 this.el.dom.value = d.innerHTML;
373                 this.owner.fireEvent('push', this, v);
374             }
375         }
376     },
377
378     // private
379     deferFocus : function(){
380         this.focus.defer(10, this);
381     },
382
383     // doc'ed in Field
384     focus : function(){
385         if(this.win && !this.sourceEditMode){
386             this.win.focus();
387         }else{
388             this.el.focus();
389         }
390     },
391     
392     assignDocWin: function()
393     {
394         var iframe = this.iframe;
395         
396          if(Roo.isIE){
397             this.doc = iframe.contentWindow.document;
398             this.win = iframe.contentWindow;
399         } else {
400 //            if (!Roo.get(this.frameId)) {
401 //                return;
402 //            }
403 //            this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
404 //            this.win = Roo.get(this.frameId).dom.contentWindow;
405             
406             if (!Roo.get(this.frameId) && !iframe.contentDocument) {
407                 return;
408             }
409             
410             this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
411             this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
412         }
413     },
414     
415     // private
416     initEditor : function(){
417         //console.log("INIT EDITOR");
418         this.assignDocWin();
419         
420         
421         
422         this.doc.designMode="on";
423         this.doc.open();
424         this.doc.write(this.getDocMarkup());
425         this.doc.close();
426         
427         var dbody = (this.doc.body || this.doc.documentElement);
428         //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
429         // this copies styles from the containing element into thsi one..
430         // not sure why we need all of this..
431         //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
432         
433         //var ss = this.el.getStyles( 'background-image', 'background-repeat');
434         //ss['background-attachment'] = 'fixed'; // w3c
435         dbody.bgProperties = 'fixed'; // ie
436         //Roo.DomHelper.applyStyles(dbody, ss);
437         Roo.EventManager.on(this.doc, {
438             //'mousedown': this.onEditorEvent,
439             'mouseup': this.onEditorEvent,
440             'dblclick': this.onEditorEvent,
441             'click': this.onEditorEvent,
442             'keyup': this.onEditorEvent,
443             buffer:100,
444             scope: this
445         });
446         if(Roo.isGecko){
447             Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
448         }
449         if(Roo.isIE || Roo.isSafari || Roo.isOpera){
450             Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
451         }
452         this.initialized = true;
453
454         this.owner.fireEvent('initialize', this);
455         this.pushValue();
456     },
457
458     // private
459     onDestroy : function(){
460         
461         
462         
463         if(this.rendered){
464             
465             //for (var i =0; i < this.toolbars.length;i++) {
466             //    // fixme - ask toolbars for heights?
467             //    this.toolbars[i].onDestroy();
468            // }
469             
470             //this.wrap.dom.innerHTML = '';
471             //this.wrap.remove();
472         }
473     },
474
475     // private
476     onFirstFocus : function(){
477         
478         this.assignDocWin();
479         
480         
481         this.activated = true;
482          
483     
484         if(Roo.isGecko){ // prevent silly gecko errors
485             this.win.focus();
486             var s = this.win.getSelection();
487             if(!s.focusNode || s.focusNode.nodeType != 3){
488                 var r = s.getRangeAt(0);
489                 r.selectNodeContents((this.doc.body || this.doc.documentElement));
490                 r.collapse(true);
491                 this.deferFocus();
492             }
493             try{
494                 this.execCmd('useCSS', true);
495                 this.execCmd('styleWithCSS', false);
496             }catch(e){}
497         }
498         this.owner.fireEvent('activate', this);
499     },
500
501     // private
502     adjustFont: function(btn){
503         var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
504         //if(Roo.isSafari){ // safari
505         //    adjust *= 2;
506        // }
507         var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
508         if(Roo.isSafari){ // safari
509             var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
510             v =  (v < 10) ? 10 : v;
511             v =  (v > 48) ? 48 : v;
512             v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
513             
514         }
515         
516         
517         v = Math.max(1, v+adjust);
518         
519         this.execCmd('FontSize', v  );
520     },
521
522     onEditorEvent : function(e)
523     {
524         this.owner.fireEvent('editorevent', this, e);
525       //  this.updateToolbar();
526         this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
527     },
528
529     insertTag : function(tg)
530     {
531         // could be a bit smarter... -> wrap the current selected tRoo..
532         if (tg.toLowerCase() == 'span' || tg.toLowerCase() == 'code') {
533             
534             range = this.createRange(this.getSelection());
535             var wrappingNode = this.doc.createElement(tg.toLowerCase());
536             wrappingNode.appendChild(range.extractContents());
537             range.insertNode(wrappingNode);
538
539             return;
540             
541             
542             
543         }
544         this.execCmd("formatblock",   tg);
545         
546     },
547     
548     insertText : function(txt)
549     {
550         
551         
552         var range = this.createRange();
553         range.deleteContents();
554                //alert(Sender.getAttribute('label'));
555                
556         range.insertNode(this.doc.createTextNode(txt));
557     } ,
558     
559      
560
561     /**
562      * Executes a Midas editor command on the editor document and performs necessary focus and
563      * toolbar updates. <b>This should only be called after the editor is initialized.</b>
564      * @param {String} cmd The Midas command
565      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
566      */
567     relayCmd : function(cmd, value){
568         this.win.focus();
569         this.execCmd(cmd, value);
570         this.owner.fireEvent('editorevent', this);
571         //this.updateToolbar();
572         this.owner.deferFocus();
573     },
574
575     /**
576      * Executes a Midas editor command directly on the editor document.
577      * For visual commands, you should use {@link #relayCmd} instead.
578      * <b>This should only be called after the editor is initialized.</b>
579      * @param {String} cmd The Midas command
580      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
581      */
582     execCmd : function(cmd, value){
583         this.doc.execCommand(cmd, false, value === undefined ? null : value);
584         this.syncValue();
585     },
586  
587  
588    
589     /**
590      * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
591      * to insert tRoo.
592      * @param {String} text | dom node.. 
593      */
594     insertAtCursor : function(text)
595     {
596         
597         if(!this.activated){
598             return;
599         }
600         /*
601         if(Roo.isIE){
602             this.win.focus();
603             var r = this.doc.selection.createRange();
604             if(r){
605                 r.collapse(true);
606                 r.pasteHTML(text);
607                 this.syncValue();
608                 this.deferFocus();
609             
610             }
611             return;
612         }
613         */
614         if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
615             this.win.focus();
616             
617             
618             // from jquery ui (MIT licenced)
619             var range, node;
620             var win = this.win;
621             
622             if (win.getSelection && win.getSelection().getRangeAt) {
623                 range = win.getSelection().getRangeAt(0);
624                 node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
625                 range.insertNode(node);
626             } else if (win.document.selection && win.document.selection.createRange) {
627                 // no firefox support
628                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
629                 win.document.selection.createRange().pasteHTML(txt);
630             } else {
631                 // no firefox support
632                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
633                 this.execCmd('InsertHTML', txt);
634             } 
635             
636             this.syncValue();
637             
638             this.deferFocus();
639         }
640     },
641  // private
642     mozKeyPress : function(e){
643         if(e.ctrlKey){
644             var c = e.getCharCode(), cmd;
645           
646             if(c > 0){
647                 c = String.fromCharCode(c).toLowerCase();
648                 switch(c){
649                     case 'b':
650                         cmd = 'bold';
651                         break;
652                     case 'i':
653                         cmd = 'italic';
654                         break;
655                     
656                     case 'u':
657                         cmd = 'underline';
658                         break;
659                     
660                     case 'v':
661                         this.cleanUpPaste.defer(100, this);
662                         return;
663                         
664                 }
665                 if(cmd){
666                     this.win.focus();
667                     this.execCmd(cmd);
668                     this.deferFocus();
669                     e.preventDefault();
670                 }
671                 
672             }
673         }
674     },
675
676     // private
677     fixKeys : function(){ // load time branching for fastest keydown performance
678         if(Roo.isIE){
679             return function(e){
680                 var k = e.getKey(), r;
681                 if(k == e.TAB){
682                     e.stopEvent();
683                     r = this.doc.selection.createRange();
684                     if(r){
685                         r.collapse(true);
686                         r.pasteHTML('&#160;&#160;&#160;&#160;');
687                         this.deferFocus();
688                     }
689                     return;
690                 }
691                 
692                 if(k == e.ENTER){
693                     r = this.doc.selection.createRange();
694                     if(r){
695                         var target = r.parentElement();
696                         if(!target || target.tagName.toLowerCase() != 'li'){
697                             e.stopEvent();
698                             r.pasteHTML('<br />');
699                             r.collapse(false);
700                             r.select();
701                         }
702                     }
703                 }
704                 if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
705                     this.cleanUpPaste.defer(100, this);
706                     return;
707                 }
708                 
709                 
710             };
711         }else if(Roo.isOpera){
712             return function(e){
713                 var k = e.getKey();
714                 if(k == e.TAB){
715                     e.stopEvent();
716                     this.win.focus();
717                     this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
718                     this.deferFocus();
719                 }
720                 if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
721                     this.cleanUpPaste.defer(100, this);
722                     return;
723                 }
724                 
725             };
726         }else if(Roo.isSafari){
727             return function(e){
728                 var k = e.getKey();
729                 
730                 if(k == e.TAB){
731                     e.stopEvent();
732                     this.execCmd('InsertText','\t');
733                     this.deferFocus();
734                     return;
735                 }
736                if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
737                     this.cleanUpPaste.defer(100, this);
738                     return;
739                 }
740                 
741              };
742         }
743     }(),
744     
745     getAllAncestors: function()
746     {
747         var p = this.getSelectedNode();
748         var a = [];
749         if (!p) {
750             a.push(p); // push blank onto stack..
751             p = this.getParentElement();
752         }
753         
754         
755         while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
756             a.push(p);
757             p = p.parentNode;
758         }
759         a.push(this.doc.body);
760         return a;
761     },
762     lastSel : false,
763     lastSelNode : false,
764     
765     
766     getSelection : function() 
767     {
768         this.assignDocWin();
769         return Roo.isIE ? this.doc.selection : this.win.getSelection();
770     },
771     
772     getSelectedNode: function() 
773     {
774         // this may only work on Gecko!!!
775         
776         // should we cache this!!!!
777         
778         
779         
780          
781         var range = this.createRange(this.getSelection()).cloneRange();
782         
783         if (Roo.isIE) {
784             var parent = range.parentElement();
785             while (true) {
786                 var testRange = range.duplicate();
787                 testRange.moveToElementText(parent);
788                 if (testRange.inRange(range)) {
789                     break;
790                 }
791                 if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
792                     break;
793                 }
794                 parent = parent.parentElement;
795             }
796             return parent;
797         }
798         
799         // is ancestor a text element.
800         var ac =  range.commonAncestorContainer;
801         if (ac.nodeType == 3) {
802             ac = ac.parentNode;
803         }
804         
805         var ar = ac.childNodes;
806          
807         var nodes = [];
808         var other_nodes = [];
809         var has_other_nodes = false;
810         for (var i=0;i<ar.length;i++) {
811             if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ? 
812                 continue;
813             }
814             // fullly contained node.
815             
816             if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
817                 nodes.push(ar[i]);
818                 continue;
819             }
820             
821             // probably selected..
822             if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
823                 other_nodes.push(ar[i]);
824                 continue;
825             }
826             // outer..
827             if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0))  {
828                 continue;
829             }
830             
831             
832             has_other_nodes = true;
833         }
834         if (!nodes.length && other_nodes.length) {
835             nodes= other_nodes;
836         }
837         if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
838             return false;
839         }
840         
841         return nodes[0];
842     },
843     createRange: function(sel)
844     {
845         // this has strange effects when using with 
846         // top toolbar - not sure if it's a great idea.
847         //this.editor.contentWindow.focus();
848         if (typeof sel != "undefined") {
849             try {
850                 return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
851             } catch(e) {
852                 return this.doc.createRange();
853             }
854         } else {
855             return this.doc.createRange();
856         }
857     },
858     getParentElement: function()
859     {
860         
861         this.assignDocWin();
862         var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
863         
864         var range = this.createRange(sel);
865          
866         try {
867             var p = range.commonAncestorContainer;
868             while (p.nodeType == 3) { // text node
869                 p = p.parentNode;
870             }
871             return p;
872         } catch (e) {
873             return null;
874         }
875     
876     },
877     /***
878      *
879      * Range intersection.. the hard stuff...
880      *  '-1' = before
881      *  '0' = hits..
882      *  '1' = after.
883      *         [ -- selected range --- ]
884      *   [fail]                        [fail]
885      *
886      *    basically..
887      *      if end is before start or  hits it. fail.
888      *      if start is after end or hits it fail.
889      *
890      *   if either hits (but other is outside. - then it's not 
891      *   
892      *    
893      **/
894     
895     
896     // @see http://www.thismuchiknow.co.uk/?p=64.
897     rangeIntersectsNode : function(range, node)
898     {
899         var nodeRange = node.ownerDocument.createRange();
900         try {
901             nodeRange.selectNode(node);
902         } catch (e) {
903             nodeRange.selectNodeContents(node);
904         }
905     
906         var rangeStartRange = range.cloneRange();
907         rangeStartRange.collapse(true);
908     
909         var rangeEndRange = range.cloneRange();
910         rangeEndRange.collapse(false);
911     
912         var nodeStartRange = nodeRange.cloneRange();
913         nodeStartRange.collapse(true);
914     
915         var nodeEndRange = nodeRange.cloneRange();
916         nodeEndRange.collapse(false);
917     
918         return rangeStartRange.compareBoundaryPoints(
919                  Range.START_TO_START, nodeEndRange) == -1 &&
920                rangeEndRange.compareBoundaryPoints(
921                  Range.START_TO_START, nodeStartRange) == 1;
922         
923          
924     },
925     rangeCompareNode : function(range, node)
926     {
927         var nodeRange = node.ownerDocument.createRange();
928         try {
929             nodeRange.selectNode(node);
930         } catch (e) {
931             nodeRange.selectNodeContents(node);
932         }
933         
934         
935         range.collapse(true);
936     
937         nodeRange.collapse(true);
938      
939         var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
940         var ee = range.compareBoundaryPoints(  Range.END_TO_END, nodeRange);
941          
942         //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
943         
944         var nodeIsBefore   =  ss == 1;
945         var nodeIsAfter    = ee == -1;
946         
947         if (nodeIsBefore && nodeIsAfter) {
948             return 0; // outer
949         }
950         if (!nodeIsBefore && nodeIsAfter) {
951             return 1; //right trailed.
952         }
953         
954         if (nodeIsBefore && !nodeIsAfter) {
955             return 2;  // left trailed.
956         }
957         // fully contined.
958         return 3;
959     },
960
961     // private? - in a new class?
962     cleanUpPaste :  function()
963     {
964         // cleans up the whole document..
965         Roo.log('cleanuppaste');
966         
967         this.cleanUpChildren(this.doc.body);
968         var clean = this.cleanWordChars(this.doc.body.innerHTML);
969         if (clean != this.doc.body.innerHTML) {
970             this.doc.body.innerHTML = clean;
971         }
972         
973     },
974     
975     cleanWordChars : function(input) {// change the chars to hex code
976         var he = Roo.HtmlEditorCore;
977         
978         var output = input;
979         Roo.each(he.swapCodes, function(sw) { 
980             var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
981             
982             output = output.replace(swapper, sw[1]);
983         });
984         
985         return output;
986     },
987     
988     
989     cleanUpChildren : function (n)
990     {
991         if (!n.childNodes.length) {
992             return;
993         }
994         for (var i = n.childNodes.length-1; i > -1 ; i--) {
995            this.cleanUpChild(n.childNodes[i]);
996         }
997     },
998     
999     
1000         
1001     
1002     cleanUpChild : function (node)
1003     {
1004         var ed = this;
1005         //console.log(node);
1006         if (node.nodeName == "#text") {
1007             // clean up silly Windows -- stuff?
1008             return; 
1009         }
1010         if (node.nodeName == "#comment") {
1011             node.parentNode.removeChild(node);
1012             // clean up silly Windows -- stuff?
1013             return; 
1014         }
1015         var lcname = node.tagName.toLowerCase();
1016         // we ignore whitelists... ?? = not really the way to go, but we probably have not got a full
1017         // whitelist of tags..
1018         
1019         if (this.black.indexOf(lcname) > -1 && this.clearUp ) {
1020             // remove node.
1021             node.parentNode.removeChild(node);
1022             return;
1023             
1024         }
1025         
1026         var remove_keep_children= Roo.HtmlEditorCore.remove.indexOf(node.tagName.toLowerCase()) > -1;
1027         
1028         // remove <a name=....> as rendering on yahoo mailer is borked with this.
1029         // this will have to be flaged elsewhere - perhaps ablack=name... on the mailer..
1030         
1031         //if (node.tagName.toLowerCase() == 'a' && !node.hasAttribute('href')) {
1032         //    remove_keep_children = true;
1033         //}
1034         
1035         if (remove_keep_children) {
1036             this.cleanUpChildren(node);
1037             // inserts everything just before this node...
1038             while (node.childNodes.length) {
1039                 var cn = node.childNodes[0];
1040                 node.removeChild(cn);
1041                 node.parentNode.insertBefore(cn, node);
1042             }
1043             node.parentNode.removeChild(node);
1044             return;
1045         }
1046         
1047         if (!node.attributes || !node.attributes.length) {
1048             this.cleanUpChildren(node);
1049             return;
1050         }
1051         
1052         function cleanAttr(n,v)
1053         {
1054             
1055             if (v.match(/^\./) || v.match(/^\//)) {
1056                 return;
1057             }
1058             if (v.match(/^(http|https):\/\//) || v.match(/^mailto:/) || v.match(/^ftp:/)) {
1059                 return;
1060             }
1061             if (v.match(/^#/)) {
1062                 return;
1063             }
1064 //            Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
1065             node.removeAttribute(n);
1066             
1067         }
1068         
1069         var cwhite = this.cwhite;
1070         var cblack = this.cblack;
1071             
1072         function cleanStyle(n,v)
1073         {
1074             if (v.match(/expression/)) { //XSS?? should we even bother..
1075                 node.removeAttribute(n);
1076                 return;
1077             }
1078             
1079             var parts = v.split(/;/);
1080             var clean = [];
1081             
1082             Roo.each(parts, function(p) {
1083                 p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
1084                 if (!p.length) {
1085                     return true;
1086                 }
1087                 var l = p.split(':').shift().replace(/\s+/g,'');
1088                 l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
1089                 
1090                 if ( cwhite.length && cblack.indexOf(l) > -1) {
1091 //                    Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
1092                     //node.removeAttribute(n);
1093                     return true;
1094                 }
1095                 //Roo.log()
1096                 // only allow 'c whitelisted system attributes'
1097                 if ( cwhite.length &&  cwhite.indexOf(l) < 0) {
1098 //                    Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
1099                     //node.removeAttribute(n);
1100                     return true;
1101                 }
1102                 
1103                 
1104                  
1105                 
1106                 clean.push(p);
1107                 return true;
1108             });
1109             if (clean.length) { 
1110                 node.setAttribute(n, clean.join(';'));
1111             } else {
1112                 node.removeAttribute(n);
1113             }
1114             
1115         }
1116         
1117         
1118         for (var i = node.attributes.length-1; i > -1 ; i--) {
1119             var a = node.attributes[i];
1120             //console.log(a);
1121             
1122             if (a.name.toLowerCase().substr(0,2)=='on')  {
1123                 node.removeAttribute(a.name);
1124                 continue;
1125             }
1126             if (Roo.HtmlEditorCore.ablack.indexOf(a.name.toLowerCase()) > -1) {
1127                 node.removeAttribute(a.name);
1128                 continue;
1129             }
1130             if (Roo.HtmlEditorCore.aclean.indexOf(a.name.toLowerCase()) > -1) {
1131                 cleanAttr(a.name,a.value); // fixme..
1132                 continue;
1133             }
1134             if (a.name == 'style') {
1135                 cleanStyle(a.name,a.value);
1136                 continue;
1137             }
1138             /// clean up MS crap..
1139             // tecnically this should be a list of valid class'es..
1140             
1141             
1142             if (a.name == 'class') {
1143                 if (a.value.match(/^Mso/)) {
1144                     node.className = '';
1145                 }
1146                 
1147                 if (a.value.match(/^body$/)) {
1148                     node.className = '';
1149                 }
1150                 continue;
1151             }
1152             
1153             // style cleanup!?
1154             // class cleanup?
1155             
1156         }
1157         
1158         
1159         this.cleanUpChildren(node);
1160         
1161         
1162     },
1163     
1164     /**
1165      * Clean up MS wordisms...
1166      */
1167     cleanWord : function(node)
1168     {
1169         if (!node) {
1170             this.cleanWord(this.doc.body);
1171             return;
1172         }
1173         
1174         if(
1175                 node.nodeName == 'SPAN'
1176 //                !node.hasAttributes() &&
1177 //                node.childNodes.length == 1 &&
1178 //                node.firstChild.nodeName == "#text"
1179         ) {
1180             console.log(node.hasAttributes());
1181             console.log(node.childNodes.length);
1182             console.log(node.firstChild.nodeName);
1183             
1184             console.log('run!!!!!');
1185             var textNode = node.firstChild;
1186             console.log(textNode);
1187             node.parentNode.insertBefore(textNode, node);
1188             node.parentNode.removeChild(node);
1189         }
1190         
1191         if (node.nodeName == "#text") {
1192             // clean up silly Windows -- stuff?
1193             return; 
1194         }
1195         if (node.nodeName == "#comment") {
1196             node.parentNode.removeChild(node);
1197             // clean up silly Windows -- stuff?
1198             return; 
1199         }
1200         
1201         if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
1202             node.parentNode.removeChild(node);
1203             return;
1204         }
1205         
1206         // remove - but keep children..
1207         if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|font)/)) {
1208             while (node.childNodes.length) {
1209                 var cn = node.childNodes[0];
1210                 node.removeChild(cn);
1211                 node.parentNode.insertBefore(cn, node);
1212             }
1213             node.parentNode.removeChild(node);
1214             this.iterateChildren(node, this.cleanWord);
1215             return;
1216         }
1217         // clean styles
1218         if (node.className.length) {
1219             
1220             var cn = node.className.split(/\W+/);
1221             var cna = [];
1222             Roo.each(cn, function(cls) {
1223                 if (cls.match(/Mso[a-zA-Z]+/)) {
1224                     return;
1225                 }
1226                 cna.push(cls);
1227             });
1228             node.className = cna.length ? cna.join(' ') : '';
1229             if (!cna.length) {
1230                 node.removeAttribute("class");
1231             }
1232         }
1233         
1234         if (node.hasAttribute("lang")) {
1235             node.removeAttribute("lang");
1236         }
1237         
1238         if (node.hasAttribute("style")) {
1239             
1240             var styles = node.getAttribute("style").split(";");
1241             var nstyle = [];
1242             Roo.each(styles, function(s) {
1243                 if (!s.match(/:/)) {
1244                     return;
1245                 }
1246                 var kv = s.split(":");
1247                 if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
1248                     return;
1249                 }
1250                 // what ever is left... we allow.
1251                 nstyle.push(s);
1252             });
1253             node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
1254             if (!nstyle.length) {
1255                 node.removeAttribute('style');
1256             }
1257         }
1258         this.iterateChildren(node, this.cleanWord);
1259         
1260         
1261         
1262     },
1263     /**
1264      * iterateChildren of a Node, calling fn each time, using this as the scole..
1265      * @param {DomNode} node node to iterate children of.
1266      * @param {Function} fn method of this class to call on each item.
1267      */
1268     iterateChildren : function(node, fn)
1269     {
1270         if (!node.childNodes.length) {
1271                 return;
1272         }
1273         for (var i = node.childNodes.length-1; i > -1 ; i--) {
1274            fn.call(this, node.childNodes[i])
1275         }
1276     },
1277     
1278     
1279     /**
1280      * cleanTableWidths.
1281      *
1282      * Quite often pasting from word etc.. results in tables with column and widths.
1283      * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
1284      *
1285      */
1286     cleanTableWidths : function(node)
1287     {
1288          
1289          
1290         if (!node) {
1291             this.cleanTableWidths(this.doc.body);
1292             return;
1293         }
1294         
1295         // ignore list...
1296         if (node.nodeName == "#text" || node.nodeName == "#comment") {
1297             return; 
1298         }
1299         Roo.log(node.tagName);
1300         if (!node.tagName.toLowerCase().match(/^(table|td|tr)$/)) {
1301             this.iterateChildren(node, this.cleanTableWidths);
1302             return;
1303         }
1304         if (node.hasAttribute('width')) {
1305             node.removeAttribute('width');
1306         }
1307         
1308          
1309         if (node.hasAttribute("style")) {
1310             // pretty basic...
1311             
1312             var styles = node.getAttribute("style").split(";");
1313             var nstyle = [];
1314             Roo.each(styles, function(s) {
1315                 if (!s.match(/:/)) {
1316                     return;
1317                 }
1318                 var kv = s.split(":");
1319                 if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
1320                     return;
1321                 }
1322                 // what ever is left... we allow.
1323                 nstyle.push(s);
1324             });
1325             node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
1326             if (!nstyle.length) {
1327                 node.removeAttribute('style');
1328             }
1329         }
1330         
1331         this.iterateChildren(node, this.cleanTableWidths);
1332         
1333         
1334     },
1335     
1336     
1337     
1338     
1339     domToHTML : function(currentElement, depth, nopadtext) {
1340         
1341         depth = depth || 0;
1342         nopadtext = nopadtext || false;
1343     
1344         if (!currentElement) {
1345             return this.domToHTML(this.doc.body);
1346         }
1347         
1348         //Roo.log(currentElement);
1349         var j;
1350         var allText = false;
1351         var nodeName = currentElement.nodeName;
1352         var tagName = Roo.util.Format.htmlEncode(currentElement.tagName);
1353         
1354         if  (nodeName == '#text') {
1355             
1356             return nopadtext ? currentElement.nodeValue : currentElement.nodeValue.trim();
1357         }
1358         
1359         
1360         var ret = '';
1361         if (nodeName != 'BODY') {
1362              
1363             var i = 0;
1364             // Prints the node tagName, such as <A>, <IMG>, etc
1365             if (tagName) {
1366                 var attr = [];
1367                 for(i = 0; i < currentElement.attributes.length;i++) {
1368                     // quoting?
1369                     var aname = currentElement.attributes.item(i).name;
1370                     if (!currentElement.attributes.item(i).value.length) {
1371                         continue;
1372                     }
1373                     attr.push(aname + '="' + Roo.util.Format.htmlEncode(currentElement.attributes.item(i).value) + '"' );
1374                 }
1375                 
1376                 ret = "<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">";
1377             } 
1378             else {
1379                 
1380                 // eack
1381             }
1382         } else {
1383             tagName = false;
1384         }
1385         if (['IMG', 'BR', 'HR', 'INPUT'].indexOf(tagName) > -1) {
1386             return ret;
1387         }
1388         if (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
1389             nopadtext = true;
1390         }
1391         
1392         
1393         // Traverse the tree
1394         i = 0;
1395         var currentElementChild = currentElement.childNodes.item(i);
1396         var allText = true;
1397         var innerHTML  = '';
1398         lastnode = '';
1399         while (currentElementChild) {
1400             // Formatting code (indent the tree so it looks nice on the screen)
1401             var nopad = nopadtext;
1402             if (lastnode == 'SPAN') {
1403                 nopad  = true;
1404             }
1405             // text
1406             if  (currentElementChild.nodeName == '#text') {
1407                 var toadd = Roo.util.Format.htmlEncode(currentElementChild.nodeValue);
1408                 toadd = nopadtext ? toadd : toadd.trim();
1409                 if (!nopad && toadd.length > 80) {
1410                     innerHTML  += "\n" + (new Array( depth + 1 )).join( "  "  );
1411                 }
1412                 innerHTML  += toadd;
1413                 
1414                 i++;
1415                 currentElementChild = currentElement.childNodes.item(i);
1416                 lastNode = '';
1417                 continue;
1418             }
1419             allText = false;
1420             
1421             innerHTML  += nopad ? '' : "\n" + (new Array( depth + 1 )).join( "  "  );
1422                 
1423             // Recursively traverse the tree structure of the child node
1424             innerHTML   += this.domToHTML(currentElementChild, depth+1, nopadtext);
1425             lastnode = currentElementChild.nodeName;
1426             i++;
1427             currentElementChild=currentElement.childNodes.item(i);
1428         }
1429         
1430         ret += innerHTML;
1431         
1432         if (!allText) {
1433                 // The remaining code is mostly for formatting the tree
1434             ret+= nopadtext ? '' : "\n" + (new Array( depth  )).join( "  "  );
1435         }
1436         
1437         
1438         if (tagName) {
1439             ret+= "</"+tagName+">";
1440         }
1441         return ret;
1442         
1443     },
1444         
1445     applyBlacklists : function()
1446     {
1447         var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white  : [];
1448         var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black :  [];
1449         
1450         this.white = [];
1451         this.black = [];
1452         Roo.each(Roo.HtmlEditorCore.white, function(tag) {
1453             if (b.indexOf(tag) > -1) {
1454                 return;
1455             }
1456             this.white.push(tag);
1457             
1458         }, this);
1459         
1460         Roo.each(w, function(tag) {
1461             if (b.indexOf(tag) > -1) {
1462                 return;
1463             }
1464             if (this.white.indexOf(tag) > -1) {
1465                 return;
1466             }
1467             this.white.push(tag);
1468             
1469         }, this);
1470         
1471         
1472         Roo.each(Roo.HtmlEditorCore.black, function(tag) {
1473             if (w.indexOf(tag) > -1) {
1474                 return;
1475             }
1476             this.black.push(tag);
1477             
1478         }, this);
1479         
1480         Roo.each(b, function(tag) {
1481             if (w.indexOf(tag) > -1) {
1482                 return;
1483             }
1484             if (this.black.indexOf(tag) > -1) {
1485                 return;
1486             }
1487             this.black.push(tag);
1488             
1489         }, this);
1490         
1491         
1492         w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite  : [];
1493         b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack :  [];
1494         
1495         this.cwhite = [];
1496         this.cblack = [];
1497         Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
1498             if (b.indexOf(tag) > -1) {
1499                 return;
1500             }
1501             this.cwhite.push(tag);
1502             
1503         }, this);
1504         
1505         Roo.each(w, function(tag) {
1506             if (b.indexOf(tag) > -1) {
1507                 return;
1508             }
1509             if (this.cwhite.indexOf(tag) > -1) {
1510                 return;
1511             }
1512             this.cwhite.push(tag);
1513             
1514         }, this);
1515         
1516         
1517         Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
1518             if (w.indexOf(tag) > -1) {
1519                 return;
1520             }
1521             this.cblack.push(tag);
1522             
1523         }, this);
1524         
1525         Roo.each(b, function(tag) {
1526             if (w.indexOf(tag) > -1) {
1527                 return;
1528             }
1529             if (this.cblack.indexOf(tag) > -1) {
1530                 return;
1531             }
1532             this.cblack.push(tag);
1533             
1534         }, this);
1535     },
1536     
1537     setStylesheets : function(stylesheets)
1538     {
1539         if(typeof(stylesheets) == 'string'){
1540             Roo.get(this.iframe.contentDocument.head).createChild({
1541                 tag : 'link',
1542                 rel : 'stylesheet',
1543                 type : 'text/css',
1544                 href : stylesheets
1545             });
1546             
1547             return;
1548         }
1549         var _this = this;
1550      
1551         Roo.each(stylesheets, function(s) {
1552             if(!s.length){
1553                 return;
1554             }
1555             
1556             Roo.get(_this.iframe.contentDocument.head).createChild({
1557                 tag : 'link',
1558                 rel : 'stylesheet',
1559                 type : 'text/css',
1560                 href : s
1561             });
1562         });
1563
1564         
1565     },
1566     
1567     removeStylesheets : function()
1568     {
1569         var _this = this;
1570         
1571         Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
1572             s.remove();
1573         });
1574     },
1575     
1576     setStyle : function(style)
1577     {
1578         Roo.get(this.iframe.contentDocument.head).createChild({
1579             tag : 'style',
1580             type : 'text/css',
1581             html : style
1582         });
1583
1584         return;
1585     }
1586     
1587     // hide stuff that is not compatible
1588     /**
1589      * @event blur
1590      * @hide
1591      */
1592     /**
1593      * @event change
1594      * @hide
1595      */
1596     /**
1597      * @event focus
1598      * @hide
1599      */
1600     /**
1601      * @event specialkey
1602      * @hide
1603      */
1604     /**
1605      * @cfg {String} fieldClass @hide
1606      */
1607     /**
1608      * @cfg {String} focusClass @hide
1609      */
1610     /**
1611      * @cfg {String} autoCreate @hide
1612      */
1613     /**
1614      * @cfg {String} inputType @hide
1615      */
1616     /**
1617      * @cfg {String} invalidClass @hide
1618      */
1619     /**
1620      * @cfg {String} invalidText @hide
1621      */
1622     /**
1623      * @cfg {String} msgFx @hide
1624      */
1625     /**
1626      * @cfg {String} validateOnBlur @hide
1627      */
1628 });
1629
1630 Roo.HtmlEditorCore.white = [
1631         'area', 'br', 'img', 'input', 'hr', 'wbr',
1632         
1633        'address', 'blockquote', 'center', 'dd',      'dir',       'div', 
1634        'dl',      'dt',         'h1',     'h2',      'h3',        'h4', 
1635        'h5',      'h6',         'hr',     'isindex', 'listing',   'marquee', 
1636        'menu',    'multicol',   'ol',     'p',       'plaintext', 'pre', 
1637        'table',   'ul',         'xmp', 
1638        
1639        'caption', 'col', 'colgroup', 'tbody', 'td', 'tfoot', 'th', 
1640       'thead',   'tr', 
1641      
1642       'dir', 'menu', 'ol', 'ul', 'dl',
1643        
1644       'embed',  'object'
1645 ];
1646
1647
1648 Roo.HtmlEditorCore.black = [
1649     //    'embed',  'object', // enable - backend responsiblity to clean thiese
1650         'applet', // 
1651         'base',   'basefont', 'bgsound', 'blink',  'body', 
1652         'frame',  'frameset', 'head',    'html',   'ilayer', 
1653         'iframe', 'layer',  'link',     'meta',    'object',   
1654         'script', 'style' ,'title',  'xml' // clean later..
1655 ];
1656 Roo.HtmlEditorCore.clean = [
1657     'script', 'style', 'title', 'xml'
1658 ];
1659 Roo.HtmlEditorCore.remove = [
1660     'font'
1661 ];
1662 // attributes..
1663
1664 Roo.HtmlEditorCore.ablack = [
1665     'on'
1666 ];
1667     
1668 Roo.HtmlEditorCore.aclean = [ 
1669     'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc' 
1670 ];
1671
1672 // protocols..
1673 Roo.HtmlEditorCore.pwhite= [
1674         'http',  'https',  'mailto'
1675 ];
1676
1677 // white listed style attributes.
1678 Roo.HtmlEditorCore.cwhite= [
1679       //  'text-align', /// default is to allow most things..
1680       
1681          
1682 //        'font-size'//??
1683 ];
1684
1685 // black listed style attributes.
1686 Roo.HtmlEditorCore.cblack= [
1687       //  'font-size' -- this can be set by the project 
1688 ];
1689
1690
1691 Roo.HtmlEditorCore.swapCodes   =[ 
1692     [    8211, "--" ], 
1693     [    8212, "--" ], 
1694     [    8216,  "'" ],  
1695     [    8217, "'" ],  
1696     [    8220, '"' ],  
1697     [    8221, '"' ],  
1698     [    8226, "*" ],  
1699     [    8230, "..." ]
1700 ]; 
1701
1702