git.roojs.org Git - roojs1/blob - Roo/form/FCKeditor.js

   1 //<script type="text/javascript">
   2
   3 /**
   4  * @class Roo.form.FCKeditor
   5  * @extends Roo.form.TextArea
   6  * Wrapper around the FCKEditor http://www.fckeditor.net
   7  * @constructor
   8  * Creates a new FCKeditor
   9  * @param {Object} config Configuration options
  10  */
  11 Roo.form.FCKeditor = function(config){
  12     Roo.form.FCKeditor.superclass.constructor.call(this, config);
  13     this.addEvents({
  14          /**
  15          * @event editorinit
  16          * Fired when the editor is initialized - you can add extra handlers here..
  17          * @param {FCKeditor} this
  18          * @param {Object} the FCK object.
  19          */
  20         editorinit : true
  21     });
  22
  23
  24 };
  25 Roo.form.FCKeditor.editors = { };
  26 Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
  27 {
  28     //defaultAutoCreate : {
  29     //    tag : "textarea",style   : "width:100px;height:60px;" ,autocomplete    : "off"
  30     //},
  31     // private
  32     /**
  33      * @cfg {Object} fck options - see fck manual for details.
  34      */
  35     fckconfig : false,
  36
  37     /**
  38      * @cfg {Object} fck toolbar set (Basic or Default)
  39      */
  40     toolbarSet : 'Basic',
  41     /**
  42      * @cfg {Object} fck BasePath
  43      */
  44     basePath : '/fckeditor/',
  45
  46
  47     frame : false,
  48
  49     value : '',
  50
  51
  52     onRender : function(ct, position)
  53     {
  54         if(!this.el){
  55             this.defaultAutoCreate = {
  56                 tag: "textarea",
  57                 style:"width:300px;height:60px;",
  58                 autocomplete: "off"
  59             };
  60         }
  61         Roo.form.FCKeditor.superclass.onRender.call(this, ct, position);
  62         /*
  63         if(this.grow){
  64             this.textSizeEl = Roo.DomHelper.append(document.body, {tag: "pre", cls: "x-form-grow-sizer"});
  65             if(this.preventScrollbars){
  66                 this.el.setStyle("overflow", "hidden");
  67             }
  68             this.el.setHeight(this.growMin);
  69         }
  70         */
  71         //console.log('onrender' + this.getId() );
  72         Roo.form.FCKeditor.editors[this.getId()] = this;
  73
  74
  75         this.replaceTextarea() ;
  76
  77     },
  78
  79     getEditor : function() {
  80         return this.fckEditor;
  81     },
  82     /**
  83      * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
  84      * @param {Mixed} value The value to set
  85      */
  86
  87
  88     setValue : function(value)
  89     {
  90         //console.log('setValue: ' + value);
  91
  92         if(typeof(value) == 'undefined') { // not sure why this is happending...
  93             return;
  94         }
  95         Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
  96
  97         //if(!this.el || !this.getEditor()) {
  98         //    this.value = value;
  99             //this.setValue.defer(100,this,[value]);
 100         //    return;
 101         //}
 102
 103         if(!this.getEditor()) {
 104             return;
 105         }
 106
 107         this.getEditor().SetData(value);
 108
 109         //
 110
 111     },
 112
 113     /**
 114      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
 115      * @return {Mixed} value The field value
 116      */
 117     getValue : function()
 118     {
 119
 120         if (this.frame && this.frame.dom.style.display == 'none') {
 121             return Roo.form.FCKeditor.superclass.getValue.call(this);
 122         }
 123
 124         if(!this.el || !this.getEditor()) {
 125
 126            // this.getValue.defer(100,this);
 127             return this.value;
 128         }
 129
 130
 131         var value=this.getEditor().GetData();
 132         Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
 133         return Roo.form.FCKeditor.superclass.getValue.call(this);
 134
 135
 136     },
 137
 138     /**
 139      * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
 140      * @return {Mixed} value The field value
 141      */
 142     getRawValue : function()
 143     {
 144         if (this.frame && this.frame.dom.style.display == 'none') {
 145             return Roo.form.FCKeditor.superclass.getRawValue.call(this);
 146         }
 147
 148         if(!this.el || !this.getEditor()) {
 149             //this.getRawValue.defer(100,this);
 150             return this.value;
 151             return;
 152         }
 153
 154
 155
 156         var value=this.getEditor().GetData();
 157         Roo.form.FCKeditor.superclass.setRawValue.apply(this,[value]);
 158         return Roo.form.FCKeditor.superclass.getRawValue.call(this);
 159
 160     },
 161
 162     setSize : function(w,h) {
 163
 164
 165
 166         //if (this.frame && this.frame.dom.style.display == 'none') {
 167         //    Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
 168         //    return;
 169         //}
 170         //if(!this.el || !this.getEditor()) {
 171         //    this.setSize.defer(100,this, [w,h]);
 172         //    return;
 173         //}
 174
 175
 176
 177         Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
 178
 179         this.frame.dom.setAttribute('width', w);
 180         this.frame.dom.setAttribute('height', h);
 181         this.frame.setSize(w,h);
 182
 183     },
 184
 185     toggleSourceEdit : function(value) {
 186
 187
 188
 189         this.el.dom.style.display = value ? '' : 'none';
 190         this.frame.dom.style.display = value ?  'none' : '';
 191
 192     },
 193
 194
 195     focus: function(tag)
 196     {
 197         if (this.frame.dom.style.display == 'none') {
 198             return Roo.form.FCKeditor.superclass.focus.call(this);
 199         }
 200         if(!this.el || !this.getEditor()) {
 201             this.focus.defer(100,this, [tag]);
 202             return;
 203         }
 204
 205
 206
 207
 208         var tgs = this.getEditor().EditorDocument.getElementsByTagName(tag);
 209         this.getEditor().Focus();
 210         if (tgs.length) {
 211             if (!this.getEditor().Selection.GetSelection()) {
 212                 this.focus.defer(100,this, [tag]);
 213                 return;
 214             }
 215
 216
 217             var r = this.getEditor().EditorDocument.createRange();
 218             r.setStart(tgs[0],0);
 219             r.setEnd(tgs[0],0);
 220             this.getEditor().Selection.GetSelection().removeAllRanges();
 221             this.getEditor().Selection.GetSelection().addRange(r);
 222             this.getEditor().Focus();
 223         }
 224
 225     },
 226
 227
 228
 229     replaceTextarea : function()
 230     {
 231         if ( document.getElementById( this.getId() + '___Frame' ) )
 232             return ;
 233         //if ( !this.checkBrowser || this._isCompatibleBrowser() )
 234         //{
 235             // We must check the elements firstly using the Id and then the name.
 236         var oTextarea = document.getElementById( this.getId() );
 237
 238         var colElementsByName = document.getElementsByName( this.getId() ) ;
 239
 240         oTextarea.style.display = 'none' ;
 241
 242         if ( oTextarea.tabIndex ) {
 243             this.TabIndex = oTextarea.tabIndex ;
 244         }
 245
 246         this._insertHtmlBefore( this._getConfigHtml(), oTextarea ) ;
 247         this._insertHtmlBefore( this._getIFrameHtml(), oTextarea ) ;
 248         this.frame = Roo.get(this.getId() + '___Frame')
 249     },
 250
 251     _getConfigHtml : function()
 252     {
 253         var sConfig = '' ;
 254
 255         for ( var o in this.fckconfig ) {
 256             sConfig += sConfig.length > 0  ? '&amp;' : '';
 257             sConfig += encodeURIComponent( o ) + '=' + encodeURIComponent( this.fckconfig[o] ) ;
 258         }
 259
 260         return '<input type="hidden" id="' + this.getId() + '___Config" value="' + sConfig + '" style="display:none" />' ;
 261     },
 262
 263
 264     _getIFrameHtml : function()
 265     {
 266         var sFile = 'fckeditor.html' ;
 267         /* no idea what this is about..
 268         try
 269         {
 270             if ( (/fcksource=true/i).test( window.top.location.search ) )
 271                 sFile = 'fckeditor.original.html' ;
 272         }
 273         catch (e) {
 274         */
 275
 276         var sLink = this.basePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.getId() ) ;
 277         sLink += this.toolbarSet ? ( '&amp;Toolbar=' + this.toolbarSet)  : '';
 278
 279
 280         var html = '<iframe id="' + this.getId() +
 281             '___Frame" src="' + sLink +
 282             '" width="' + this.width +
 283             '" height="' + this.height + '"' +
 284             (this.tabIndex ?  ' tabindex="' + this.tabIndex + '"' :'' ) +
 285             ' frameborder="0" scrolling="no"></iframe>' ;
 286
 287         return html ;
 288     },
 289
 290     _insertHtmlBefore : function( html, element )
 291     {
 292         if ( element.insertAdjacentHTML )       {
 293             // IE
 294             element.insertAdjacentHTML( 'beforeBegin', html ) ;
 295         } else { // Gecko
 296             var oRange = document.createRange() ;
 297             oRange.setStartBefore( element ) ;
 298             var oFragment = oRange.createContextualFragment( html );
 299             element.parentNode.insertBefore( oFragment, element ) ;
 300         }
 301     }
 302
 303
 304
 305
 306
 307
 308
 309
 310 });
 311
 312 //Roo.reg('fckeditor', Roo.form.FCKeditor);
 313
 314 function FCKeditor_OnComplete(editorInstance){
 315     var f = Roo.form.FCKeditor.editors[editorInstance.Name];
 316     f.fckEditor = editorInstance;
 317     //console.log("loaded");
 318     f.fireEvent('editorinit', f, editorInstance);
 319 }
 320
 321
 322
 323
 324
 325
 326
 327
 328
 329
 330
 331
 332
 333
 334
 335
 336
 337