git.roojs.org Git - roojs1/blob - 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  * licensing@extjs.com
   7  *
   8  * http://www.extjs.com/license
   9  */
  10
  11  /**
  12   *
  13   * Known bugs:
  14   * Default CSS appears to render it as fixed text by default (should really be Sans-Serif)
  15   * - IE ? - no idea how much works there.
  16   *
  17   *
  18   *
  19   */
  20
  21
  22 /**
  23  * @class Ext.form.HtmlEditor
  24  * @extends Ext.form.Field
  25  * Provides a lightweight HTML Editor component.
  26  * WARNING - THIS CURRENTlY ONLY WORKS ON FIREFOX - USE FCKeditor for a cross platform version
  27  *
  28  * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
  29  * supported by this editor.</b><br/><br/>
  30  * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
  31  * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
  32  */
  33 Roo.form.HtmlEditor = Roo.extend(Roo.form.Field, {
  34       /**
  35      * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
  36      */
  37     toolbars : false,
  38     /**
  39      * @cfg {String} createLinkText The default text for the create link prompt
  40      */
  41     createLinkText : 'Please enter the URL for the link:',
  42     /**
  43      * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
  44      */
  45     defaultLinkValue : 'http:/'+'/',
  46
  47
  48     // id of frame..
  49     frameId: false,
  50
  51     // private properties
  52     validationEvent : false,
  53     deferHeight: true,
  54     initialized : false,
  55     activated : false,
  56     sourceEditMode : false,
  57     onFocus : Roo.emptyFn,
  58     iframePad:3,
  59     hideMode:'offsets',
  60     defaultAutoCreate : {
  61         tag: "textarea",
  62         style:"width:500px;height:300px;",
  63         autocomplete: "off"
  64     },
  65
  66     // private
  67     initComponent : function(){
  68         this.addEvents({
  69             /**
  70              * @event initialize
  71              * Fires when the editor is fully initialized (including the iframe)
  72              * @param {HtmlEditor} this
  73              */
  74             initialize: true,
  75             /**
  76              * @event activate
  77              * Fires when the editor is first receives the focus. Any insertion must wait
  78              * until after this event.
  79              * @param {HtmlEditor} this
  80              */
  81             activate: true,
  82              /**
  83              * @event beforesync
  84              * Fires before the textarea is updated with content from the editor iframe. Return false
  85              * to cancel the sync.
  86              * @param {HtmlEditor} this
  87              * @param {String} html
  88              */
  89             beforesync: true,
  90              /**
  91              * @event beforepush
  92              * Fires before the iframe editor is updated with content from the textarea. Return false
  93              * to cancel the push.
  94              * @param {HtmlEditor} this
  95              * @param {String} html
  96              */
  97             beforepush: true,
  98              /**
  99              * @event sync
 100              * Fires when the textarea is updated with content from the editor iframe.
 101              * @param {HtmlEditor} this
 102              * @param {String} html
 103              */
 104             sync: true,
 105              /**
 106              * @event push
 107              * Fires when the iframe editor is updated with content from the textarea.
 108              * @param {HtmlEditor} this
 109              * @param {String} html
 110              */
 111             push: true,
 112              /**
 113              * @event editmodechange
 114              * Fires when the editor switches edit modes
 115              * @param {HtmlEditor} this
 116              * @param {Boolean} sourceEdit True if source edit, false if standard editing.
 117              */
 118             editmodechange: true,
 119             /**
 120              * @event editorevent
 121              * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
 122              * @param {HtmlEditor} this
 123              */
 124             editorevent: true
 125         })
 126     },
 127
 128     /**
 129      * Protected method that will not generally be called directly. It
 130      * is called when the editor creates its toolbar. Override this method if you need to
 131      * add custom toolbar buttons.
 132      * @param {HtmlEditor} editor
 133      */
 134     createToolbar : function(editor){
 135         if (!editor.toolbars || !editor.toolbars.length) {
 136             editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
 137         }
 138
 139         for (var i =0 ; i < editor.toolbars.length;i++) {
 140             editor.toolbars[i].init(editor);
 141         }
 142
 143
 144     },
 145
 146     /**
 147      * Protected method that will not generally be called directly. It
 148      * is called when the editor initializes the iframe with HTML contents. Override this method if you
 149      * want to change the initialization markup of the iframe (e.g. to add stylesheets).
 150      */
 151     getDocMarkup : function(){
 152         return '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>';
 153     },
 154
 155     // private
 156     onRender : function(ct, position){
 157         Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
 158         this.el.dom.style.border = '0 none';
 159         this.el.dom.setAttribute('tabIndex', -1);
 160         this.el.addClass('x-hidden');
 161         if(Roo.isIE){ // fix IE 1px bogus margin
 162             this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
 163         }
 164         this.wrap = this.el.wrap({
 165             cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
 166         });
 167
 168         this.frameId = Roo.id();
 169         this.createToolbar(this);
 170
 171
 172
 173
 174
 175
 176         var iframe = this.wrap.createChild({
 177             tag: 'iframe',
 178             id: this.frameId,
 179             name: this.frameId,
 180             frameBorder : 'no',
 181             'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL  :  "javascript:false"
 182         });
 183
 184        // console.log(iframe);
 185         //this.wrap.dom.appendChild(iframe);
 186
 187         this.iframe = iframe.dom;
 188
 189          this.assignDocWin();
 190
 191         this.doc.designMode = 'on';
 192
 193         this.doc.open();
 194         this.doc.write(this.getDocMarkup());
 195         this.doc.close();
 196
 197
 198         var task = { // must defer to wait for browser to be ready
 199             run : function(){
 200                 //console.log("run task?" + this.doc.readyState);
 201                 this.assignDocWin();
 202                 if(this.doc.body || this.doc.readyState == 'complete'){
 203                     try {
 204
 205
 206                         this.doc.designMode="on";
 207                     } catch (e) {
 208                         return;
 209                     }
 210                     Roo.TaskMgr.stop(task);
 211                     this.initEditor.defer(10, this);
 212                 }
 213             },
 214             interval : 10,
 215             duration:10000,
 216             scope: this
 217         };
 218         Roo.TaskMgr.start(task);
 219
 220         if(!this.width){
 221             this.setSize(this.el.getSize());
 222         }
 223     },
 224
 225     // private
 226     onResize : function(w, h){
 227         Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
 228         if(this.el && this.iframe){
 229             if(typeof w == 'number'){
 230                 var aw = w - this.wrap.getFrameWidth('lr');
 231                 this.el.setWidth(this.adjustWidth('textarea', aw));
 232                 this.iframe.style.width = aw + 'px';
 233             }
 234             if(typeof h == 'number'){
 235                 var tbh = 0;
 236                 for (var i =0; i < this.toolbars.length;i++) {
 237                     // fixme - ask toolbars for heights?
 238                     tbh += this.toolbars[i].tb.el.getHeight();
 239                 }
 240
 241
 242
 243
 244                 var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
 245                 this.el.setHeight(this.adjustWidth('textarea', ah));
 246                 this.iframe.style.height = ah + 'px';
 247                 if(this.doc){
 248                     (this.doc.body || this.doc.documentElement).style.height = (ah - (this.iframePad*2)) + 'px';
 249                 }
 250             }
 251         }
 252     },
 253
 254     /**
 255      * Toggles the editor between standard and source edit mode.
 256      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
 257      */
 258     toggleSourceEdit : function(sourceEditMode){
 259
 260         this.sourceEditMode = sourceEditMode === true;
 261
 262         if(this.sourceEditMode){
 263
 264             this.syncValue();
 265             this.iframe.className = 'x-hidden';
 266             this.el.removeClass('x-hidden');
 267             this.el.dom.removeAttribute('tabIndex');
 268             this.el.focus();
 269         }else{
 270
 271             this.pushValue();
 272             this.iframe.className = '';
 273             this.el.addClass('x-hidden');
 274             this.el.dom.setAttribute('tabIndex', -1);
 275             this.deferFocus();
 276         }
 277         this.setSize(this.wrap.getSize());
 278         this.fireEvent('editmodechange', this, this.sourceEditMode);
 279     },
 280
 281     // private used internally
 282     createLink : function(){
 283         var url = prompt(this.createLinkText, this.defaultLinkValue);
 284         if(url && url != 'http:/'+'/'){
 285             this.relayCmd('createlink', url);
 286         }
 287     },
 288
 289     // private (for BoxComponent)
 290     adjustSize : Roo.BoxComponent.prototype.adjustSize,
 291
 292     // private (for BoxComponent)
 293     getResizeEl : function(){
 294         return this.wrap;
 295     },
 296
 297     // private (for BoxComponent)
 298     getPositionEl : function(){
 299         return this.wrap;
 300     },
 301
 302     // private
 303     initEvents : function(){
 304         this.originalValue = this.getValue();
 305     },
 306
 307     /**
 308      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
 309      * @method
 310      */
 311     markInvalid : Roo.emptyFn,
 312     /**
 313      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
 314      * @method
 315      */
 316     clearInvalid : Roo.emptyFn,
 317
 318     setValue : function(v){
 319         Roo.form.HtmlEditor.superclass.setValue.call(this, v);
 320         this.pushValue();
 321     },
 322
 323     /**
 324      * Protected method that will not generally be called directly. If you need/want
 325      * custom HTML cleanup, this is the method you should override.
 326      * @param {String} html The HTML to be cleaned
 327      * return {String} The cleaned HTML
 328      */
 329     cleanHtml : function(html){
 330         html = String(html);
 331         if(html.length > 5){
 332             if(Roo.isSafari){ // strip safari nonsense
 333                 html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
 334             }
 335         }
 336         if(html == '&nbsp;'){
 337             html = '';
 338         }
 339         return html;
 340     },
 341
 342     /**
 343      * Protected method that will not generally be called directly. Syncs the contents
 344      * of the editor iframe with the textarea.
 345      */
 346     syncValue : function(){
 347         if(this.initialized){
 348             var bd = (this.doc.body || this.doc.documentElement);
 349             var html = bd.innerHTML;
 350             if(Roo.isSafari){
 351                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
 352                 var m = bs.match(/text-align:(.*?);/i);
 353                 if(m && m[1]){
 354                     html = '<div style="'+m[0]+'">' + html + '</div>';
 355                 }
 356             }
 357             html = this.cleanHtml(html);
 358             if(this.fireEvent('beforesync', this, html) !== false){
 359                 this.el.dom.value = html;
 360                 this.fireEvent('sync', this, html);
 361             }
 362         }
 363     },
 364
 365     /**
 366      * Protected method that will not generally be called directly. Pushes the value of the textarea
 367      * into the iframe editor.
 368      */
 369     pushValue : function(){
 370         if(this.initialized){
 371             var v = this.el.dom.value;
 372             if(v.length < 1){
 373                 v = '&#160;';
 374             }
 375             if(this.fireEvent('beforepush', this, v) !== false){
 376                 (this.doc.body || this.doc.documentElement).innerHTML = v;
 377                 this.fireEvent('push', this, v);
 378             }
 379         }
 380     },
 381
 382     // private
 383     deferFocus : function(){
 384         this.focus.defer(10, this);
 385     },
 386
 387     // doc'ed in Field
 388     focus : function(){
 389         if(this.win && !this.sourceEditMode){
 390             this.win.focus();
 391         }else{
 392             this.el.focus();
 393         }
 394     },
 395
 396     assignDocWin: function()
 397     {
 398         var iframe = this.iframe;
 399
 400          if(Roo.isIE){
 401             this.doc = iframe.contentWindow.document;
 402             this.win = iframe.contentWindow;
 403         } else {
 404             this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
 405             this.win = Roo.get(this.frameId).dom.contentWindow;
 406         }
 407     },
 408
 409     // private
 410     initEditor : function(){
 411         //console.log("INIT EDITOR");
 412         this.assignDocWin();
 413
 414
 415
 416         this.doc.designMode="on";
 417         this.doc.open();
 418         this.doc.write(this.getDocMarkup());
 419         this.doc.close();
 420
 421         var dbody = (this.doc.body || this.doc.documentElement);
 422         //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
 423         // this copies styles from the containing element into thsi one..
 424         // not sure why we need all of this..
 425         var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
 426         ss['background-attachment'] = 'fixed'; // w3c
 427         dbody.bgProperties = 'fixed'; // ie
 428         Roo.DomHelper.applyStyles(dbody, ss);
 429         Roo.EventManager.on(this.doc, {
 430             'mousedown': this.onEditorEvent,
 431             'dblclick': this.onEditorEvent,
 432             'click': this.onEditorEvent,
 433             'keyup': this.onEditorEvent,
 434             buffer:100,
 435             scope: this
 436         });
 437         if(Roo.isGecko){
 438             Roo.EventManager.on(this.doc, 'keypress', this.applyCommand, this);
 439         }
 440         if(Roo.isIE || Roo.isSafari || Roo.isOpera){
 441             Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
 442         }
 443         this.initialized = true;
 444
 445         this.fireEvent('initialize', this);
 446         this.pushValue();
 447     },
 448
 449     // private
 450     onDestroy : function(){
 451
 452
 453
 454         if(this.rendered){
 455
 456             for (var i =0; i < this.toolbars.length;i++) {
 457                 // fixme - ask toolbars for heights?
 458                 this.toolbars[i].onDestroy();
 459             }
 460
 461             this.wrap.dom.innerHTML = '';
 462             this.wrap.remove();
 463         }
 464     },
 465
 466     // private
 467     onFirstFocus : function(){
 468
 469         this.assignDocWin();
 470
 471
 472         this.activated = true;
 473         for (var i =0; i < this.toolbars.length;i++) {
 474             this.toolbars[i].onFirstFocus();
 475         }
 476
 477         if(Roo.isGecko){ // prevent silly gecko errors
 478             this.win.focus();
 479             var s = this.win.getSelection();
 480             if(!s.focusNode || s.focusNode.nodeType != 3){
 481                 var r = s.getRangeAt(0);
 482                 r.selectNodeContents((this.doc.body || this.doc.documentElement));
 483                 r.collapse(true);
 484                 this.deferFocus();
 485             }
 486             try{
 487                 this.execCmd('useCSS', true);
 488                 this.execCmd('styleWithCSS', false);
 489             }catch(e){}
 490         }
 491         this.fireEvent('activate', this);
 492     },
 493
 494     // private
 495     adjustFont: function(btn){
 496         var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
 497         //if(Roo.isSafari){ // safari
 498         //    adjust *= 2;
 499        // }
 500         var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
 501         if(Roo.isSafari){ // safari
 502             var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
 503             v =  (v < 10) ? 10 : v;
 504             v =  (v > 48) ? 48 : v;
 505             v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
 506
 507         }
 508
 509
 510         v = Math.max(1, v+adjust);
 511
 512         this.execCmd('FontSize', v  );
 513     },
 514
 515     onEditorEvent : function(e){
 516         this.fireEvent('editorevent', this, e);
 517       //  this.updateToolbar();
 518         this.syncValue();
 519     },
 520
 521     insertTag : function(tg)
 522     {
 523         // could be a bit smarter... -> wrap the current selected tRoo..
 524
 525         this.execCmd("formatblock",   tg);
 526
 527     },
 528
 529     insertText : function(txt)
 530     {
 531
 532
 533         range = this.createRange();
 534         range.deleteContents();
 535                //alert(Sender.getAttribute('label'));
 536
 537         range.insertNode(this.doc.createTextNode(txt));
 538     } ,
 539
 540     // private
 541     relayBtnCmd : function(btn){
 542         this.relayCmd(btn.cmd);
 543     },
 544
 545     /**
 546      * Executes a Midas editor command on the editor document and performs necessary focus and
 547      * toolbar updates. <b>This should only be called after the editor is initialized.</b>
 548      * @param {String} cmd The Midas command
 549      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
 550      */
 551     relayCmd : function(cmd, value){
 552         this.win.focus();
 553         this.execCmd(cmd, value);
 554         this.fireEvent('editorevent', this);
 555         //this.updateToolbar();
 556         this.deferFocus();
 557     },
 558
 559     /**
 560      * Executes a Midas editor command directly on the editor document.
 561      * For visual commands, you should use {@link #relayCmd} instead.
 562      * <b>This should only be called after the editor is initialized.</b>
 563      * @param {String} cmd The Midas command
 564      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
 565      */
 566     execCmd : function(cmd, value){
 567         this.doc.execCommand(cmd, false, value === undefined ? null : value);
 568         this.syncValue();
 569     },
 570
 571     // private
 572     applyCommand : function(e){
 573         if(e.ctrlKey){
 574             var c = e.getCharCode(), cmd;
 575             if(c > 0){
 576                 c = String.fromCharCode(c);
 577                 switch(c){
 578                     case 'b':
 579                         cmd = 'bold';
 580                     break;
 581                     case 'i':
 582                         cmd = 'italic';
 583                     break;
 584                     case 'u':
 585                         cmd = 'underline';
 586                     break;
 587                 }
 588                 if(cmd){
 589                     this.win.focus();
 590                     this.execCmd(cmd);
 591                     this.deferFocus();
 592                     e.preventDefault();
 593                 }
 594             }
 595         }
 596     },
 597
 598     /**
 599      * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
 600      * to insert tRoo.
 601      * @param {String} text
 602      */
 603     insertAtCursor : function(text){
 604         if(!this.activated){
 605             return;
 606         }
 607         if(Roo.isIE){
 608             this.win.focus();
 609             var r = this.doc.selection.createRange();
 610             if(r){
 611                 r.collapse(true);
 612                 r.pasteHTML(text);
 613                 this.syncValue();
 614                 this.deferFocus();
 615             }
 616         }else if(Roo.isGecko || Roo.isOpera){
 617             this.win.focus();
 618             this.execCmd('InsertHTML', text);
 619             this.deferFocus();
 620         }else if(Roo.isSafari){
 621             this.execCmd('InsertText', text);
 622             this.deferFocus();
 623         }
 624     },
 625
 626     // private
 627     fixKeys : function(){ // load time branching for fastest keydown performance
 628         if(Roo.isIE){
 629             return function(e){
 630                 var k = e.getKey(), r;
 631                 if(k == e.TAB){
 632                     e.stopEvent();
 633                     r = this.doc.selection.createRange();
 634                     if(r){
 635                         r.collapse(true);
 636                         r.pasteHTML('&#160;&#160;&#160;&#160;');
 637                         this.deferFocus();
 638                     }
 639                 }else if(k == e.ENTER){
 640                     r = this.doc.selection.createRange();
 641                     if(r){
 642                         var target = r.parentElement();
 643                         if(!target || target.tagName.toLowerCase() != 'li'){
 644                             e.stopEvent();
 645                             r.pasteHTML('<br />');
 646                             r.collapse(false);
 647                             r.select();
 648                         }
 649                     }
 650                 }
 651             };
 652         }else if(Roo.isOpera){
 653             return function(e){
 654                 var k = e.getKey();
 655                 if(k == e.TAB){
 656                     e.stopEvent();
 657                     this.win.focus();
 658                     this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
 659                     this.deferFocus();
 660                 }
 661             };
 662         }else if(Roo.isSafari){
 663             return function(e){
 664                 var k = e.getKey();
 665                 if(k == e.TAB){
 666                     e.stopEvent();
 667                     this.execCmd('InsertText','\t');
 668                     this.deferFocus();
 669                 }
 670              };
 671         }
 672     }(),
 673
 674     getAllAncestors: function()
 675     {
 676         var p = this.getSelectedNode();
 677         var a = [];
 678         if (!p) {
 679             a.push(p); // push blank onto stack..
 680             p = this.getParentElement();
 681         }
 682
 683
 684         while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
 685             a.push(p);
 686             p = p.parentNode;
 687         }
 688         a.push(this.doc.body);
 689         return a;
 690     },
 691     lastSel : false,
 692     lastSelNode : false,
 693
 694
 695     getSelection : function()
 696     {
 697         this.assignDocWin();
 698         return Roo.isIE ? this.doc.selection : this.win.getSelection();
 699     },
 700
 701     getSelectedNode: function()
 702     {
 703         // this may only work on Gecko!!!
 704
 705         // should we cache this!!!!
 706
 707
 708
 709
 710         var range = this.createRange(this.getSelection());
 711
 712         if (Roo.isIE) {
 713             var parent = range.parentElement();
 714             while (true) {
 715                 var testRange = range.duplicate();
 716                 testRange.moveToElementText(parent);
 717                 if (testRange.inRange(range)) {
 718                     break;
 719                 }
 720                 if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
 721                     break;
 722                 }
 723                 parent = parent.parentElement;
 724             }
 725             return parent;
 726         }
 727
 728
 729         var ar = range.endContainer.childNodes;
 730         if (!ar.length) {
 731             ar = range.commonAncestorContainer.childNodes;
 732             //alert(ar.length);
 733         }
 734         var nodes = [];
 735         var other_nodes = [];
 736         var has_other_nodes = false;
 737         for (var i=0;i<ar.length;i++) {
 738             if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ?
 739                 continue;
 740             }
 741             // fullly contained node.
 742
 743             if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
 744                 nodes.push(ar[i]);
 745                 continue;
 746             }
 747
 748             // probably selected..
 749             if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
 750                 other_nodes.push(ar[i]);
 751                 continue;
 752             }
 753             if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0))  {
 754                 continue;
 755             }
 756
 757
 758             has_other_nodes = true;
 759         }
 760         if (!nodes.length && other_nodes.length) {
 761             nodes= other_nodes;
 762         }
 763         if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
 764             return false;
 765         }
 766
 767         return nodes[0];
 768     },
 769     createRange: function(sel)
 770     {
 771         // this has strange effects when using with
 772         // top toolbar - not sure if it's a great idea.
 773         //this.editor.contentWindow.focus();
 774         if (typeof sel != "undefined") {
 775             try {
 776                 return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
 777             } catch(e) {
 778                 return this.doc.createRange();
 779             }
 780         } else {
 781             return this.doc.createRange();
 782         }
 783     },
 784     getParentElement: function()
 785     {
 786
 787         this.assignDocWin();
 788         var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
 789
 790         var range = this.createRange(sel);
 791
 792         try {
 793             var p = range.commonAncestorContainer;
 794             while (p.nodeType == 3) { // text node
 795                 p = p.parentNode;
 796             }
 797             return p;
 798         } catch (e) {
 799             return null;
 800         }
 801
 802     },
 803
 804
 805
 806     // BC Hacks - cause I cant work out what i was trying to do..
 807     rangeIntersectsNode : function(range, node)
 808     {
 809         var nodeRange = node.ownerDocument.createRange();
 810         try {
 811             nodeRange.selectNode(node);
 812         }
 813         catch (e) {
 814             nodeRange.selectNodeContents(node);
 815         }
 816
 817         return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 &&
 818                  range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;
 819     },
 820     rangeCompareNode : function(range, node) {
 821         var nodeRange = node.ownerDocument.createRange();
 822         try {
 823             nodeRange.selectNode(node);
 824         } catch (e) {
 825             nodeRange.selectNodeContents(node);
 826         }
 827         var nodeIsBefore = range.compareBoundaryPoints(Range.START_TO_START, nodeRange) == 1;
 828         var nodeIsAfter = range.compareBoundaryPoints(Range.END_TO_END, nodeRange) == -1;
 829
 830         if (nodeIsBefore && !nodeIsAfter)
 831             return 0;
 832         if (!nodeIsBefore && nodeIsAfter)
 833             return 1;
 834         if (nodeIsBefore && nodeIsAfter)
 835             return 2;
 836
 837         return 3;
 838     }
 839
 840
 841
 842     // hide stuff that is not compatible
 843     /**
 844      * @event blur
 845      * @hide
 846      */
 847     /**
 848      * @event change
 849      * @hide
 850      */
 851     /**
 852      * @event focus
 853      * @hide
 854      */
 855     /**
 856      * @event specialkey
 857      * @hide
 858      */
 859     /**
 860      * @cfg {String} fieldClass @hide
 861      */
 862     /**
 863      * @cfg {String} focusClass @hide
 864      */
 865     /**
 866      * @cfg {String} autoCreate @hide
 867      */
 868     /**
 869      * @cfg {String} inputType @hide
 870      */
 871     /**
 872      * @cfg {String} invalidClass @hide
 873      */
 874     /**
 875      * @cfg {String} invalidText @hide
 876      */
 877     /**
 878      * @cfg {String} msgFx @hide
 879      */
 880     /**
 881      * @cfg {String} validateOnBlur @hide
 882      */
 883 });