CKEditor Extension

[iosoftgame]

Hello.

First of all, I would like to say that I'm not sure if this is the right forum for this question But anyway, here it goes:

I have been searching for an extension to ExtJS that will enable me to use CKEditor inside an ExtJS application, instead of the HtmlEditor ExtJS offeres, but I can't seem to find one.

My question is therefore: Does there exists an CKEditor extension to ExtJS and if so, where can I download it?

In advance, thanks.

Best regards
Morten Johansen

[sidaliextjs]

Hi
I think that is delivered with Group Office Community edition
here is the code

/****************************************************
* FCKEditor Extension
*****************************************************/


Ext.form.FCKeditor = function(config){
    this.config = config;
    Ext.form.FCKeditor.superclass.constructor.call(this, config);
    this.FCKid=0;
    this.MyisLoaded=false;
    this.MyValue='';
};

Ext.extend(Ext.form.FCKeditor, Ext.form.TextArea,  {
    onRender : function(ct, position){
        if(!this.el){
            this.defaultAutoCreate = {
                tag: "textarea",
                autocomplete: "off"                
            };
        }
        Ext.form.TextArea.superclass.onRender.call(this, ct, position);
        //Hide textarea to stop flashing up before FCKEditor renders.
        this.hideMode = "visibility"; // set hideMode to visibility, to retain height.
        this.hidden = true; // hide textarea
        
        if(this.grow){
            this.textSizeEl = Ext.DomHelper.append(document.body, {
                tag: "pre", cls: "x-form-grow-sizer"
            });
            if(this.preventScrollbars){
                this.el.setStyle("overflow", "hidden");
            }
            this.el.setHeight(this.growMin);
        }
        if (this.FCKid==0) this.FCKid=get_FCKeditor_id_value()
        
        
        setTimeout("loadFCKeditor('"+this.id+"',"+ this.container.getHeight() +");",100); //Change this.name to this.id
        
        
        //this.on('resize', this.textAreaResized, this);     
    },
    setValue : function(value){
        this.MyValue=value;
        if (this.FCKid==0) this.FCKid=get_FCKeditor_id_value();
        // only after FCKeditor_OnComplete
        if (this.MyisLoaded){
          FCKeditorSetValue(this.FCKid,this.id,value); //Change this.name to this.id
        } else {
          //alert('MyisLoaded = false');
        }
        Ext.form.TextArea.superclass.setValue.apply(this,[value]);
    },

    getValue : function(){
        if (this.MyisLoaded){
            value=FCKeditorGetValue(this.id); //Change this.name to this.id
            Ext.form.TextArea.superclass.setValue.apply(this,[value]);
            if (Ext.form.TextArea.superclass.getValue(this))
                return Ext.form.TextArea.superclass.getValue(this);
            else
                return value;
        }else{
            return this.MyValue;
        }
    },

    getRawValue : function(){
        if (this.MyisLoaded){
            value=FCKeditorGetValue(this.id); //Change this.name to this.id
            Ext.form.TextArea.superclass.setRawValue.apply(this,[value]);
            return Ext.form.TextArea.superclass.getRawValue(this);
        }else{
            return this.MyValue;
        }
    },
    
    textAreaResized : function(textarea, adjWidth, adjHeight, rawWidth, rawHeight){
        
        if(typeof(FCKeditorAPI)!= 'undefined')
        {
                var oEditor = FCKeditorAPI.GetInstance(this.FCKid);
                oEditor.EditorWindow.parent.frameElement.height = rawHeight-51;
                oEditor.EditorWindow.parent.frameElement.width = rawWidth;
        }        
    }
});
Ext.reg('fckeditor', Ext.form.FCKeditor);


function loadFCKeditor(element, height){
    oFCKeditor = new FCKeditor( element );
    oFCKeditor.BasePath      = oFCKeditorOptions.BasePath;
    oFCKeditor.ToolbarSet    = oFCKeditorOptions.ToolbarSet;
    oFCKeditor.Config        = oFCKeditorOptions.Config;
    oFCKeditor.Height = height;
    oFCKeditor.ReplaceTextarea();
    
    
}
function FCKeditor_OnComplete(editorInstance){

    Ext.getCmp(editorInstance.Name).MyisLoaded=true;

    // Removed OnStatusChange element, does not appear to be need, cause permission error in IE
}
var FCKeditor_value=new Array();
function FCKeditorSetValue(id,name,value){
    if ((id!=undefined)&&(name!=undefined)){
        if (value!=undefined) FCKeditor_value[id]=value;
        else if (FCKeditor_value[id]==undefined) FCKeditor_value[id]='';
        var oEditor = FCKeditorAPI.GetInstance(name);
        // some trouble in Opera 9.50
        if(oEditor!=undefined) oEditor.SetData(FCKeditor_value[id]);
    }
}
function FCKeditorGetValue(name){
    if ((id!=undefined)&&(name!=undefined)){
        data='';
        var oEditor = FCKeditorAPI.GetInstance(name);
        // some trouble in Opera 9.50:
        //
        // message: Statement on line 36: Cannot convert undefined or null to Object
        // oEditor.GetData();
        //
        if(oEditor!=undefined) data=oEditor.GetData();
        return data;
    }
}
var FCKeditor_id_value;
function get_FCKeditor_id_value(){
    if (!FCKeditor_id_value){
        FCKeditor_id_value=0;
    }
    FCKeditor_id_value=FCKeditor_id_value+1;
    return FCKeditor_id_value;
} 

Enjoy!

[wki01]

My knowledge of ExtJS are still too poor to understand what I do.

Can someone post a working example with ExtJS 3.0 and CKEditor 3.0?

thanks

[Alex84]

Hm I tested it today. Replace

oFCKeditor = new FCKeditor( element ); 

with

oFCKeditor = new CKEDITOR.replace(element); 

And it works. I have the editor in a Tabpanel. Only the sizing not work correctly at the moment. The editor is smaller than my window and I can resize the editor in the window manually

Edit:
for Height replace

 oFCKeditor.Height= height; 

with

 oFCKeditor.config.height = height; 

here is a link to the docs: http://docs.fckeditor.net/ckeditor_a...OR.config.html

[wki01]

A small complete example I would be very useful.
thanks

[Alex84]

Here is a complete example for using FCKEditor Extension
http://www.extjs.com/forum/showthread.php?t=17423

When this works replace the two lines I posted and set the correct paths to CKEditor.

[disfusion]

Hi Guys

I have been playing with CKEditor and Ext JS. I stripped down the FCKEditor example and created the following which seems to work for me. It is only the basics at the moment, not sure if more is needed.

the ckeditor.js extension file looks like this.

/****************************************************
* CKEditor Extension
*****************************************************/
Ext.form.CKEditor = function(config){
    this.config = config;
    Ext.form.CKEditor.superclass.constructor.call(this, config);
};

Ext.extend(Ext.form.CKEditor, Ext.form.TextArea,  {
    onRender : function(ct, position){
        if(!this.el){
            this.defaultAutoCreate = {
                tag: "textarea",
                autocomplete: "off"
            };
        }
        Ext.form.TextArea.superclass.onRender.call(this, ct, position);
        CKEDITOR.replace(this.id, this.config.CKConfig);
    },
    
    setValue : function(value){
        Ext.form.TextArea.superclass.setValue.apply(this,[value]);
        CKEDITOR.instances[this.id].setData( value );
    },

    getValue : function(){
        CKEDITOR.instances[this.id].updateElement();
        return Ext.form.TextArea.superclass.getValue(this);
    },

    getRawValue : function(){
        CKEDITOR.instances[this.id].updateElement();    
        return Ext.form.TextArea.superclass.getRawValue(this);
    }
});
Ext.reg('ckeditor', Ext.form.CKEditor); 

The Ext Js Form item is as follows:

    {
        xtype: 'ckeditor',
        fieldLabel: 'Editor',
        name: 'htmlcode',
        CKConfig: {
            /* Enter your CKEditor config paramaters here or define a custom CKEditor config file. */
            customConfig : '/ckeditor/config.js',        
            toolbar: 'Basic',
            height : 200,
            width: 250
        }
    } 

You can enter CKEditor config paramaters in the CKConfig paramater or define a custom CKEditor config file and point to that.

I have also created an example application based on the "Form with embedded Grid" from the Ext JS 3.0 example file.

just download Ext JS 3.0 and CKEditor 3.0 and the example file extract them all and it should work, hopefully .

[Alex84]

add a destroy Instance:

,destroyInstance: function(){
        if (CKEDITOR.instances[this.id]) {
            delete CKEDITOR.instances[this.id];
        }
    } 

[iosoftgame]

Great, thanks for sharing

I got a question: Is there a way to make CKEditor styled (themed) like ExtJS?
I mean, right now CKEditor doesn't really blend in with the rest of the ExtJS theme.

[disfusion]

You have a couple of choice to change how it looks.

1. You can change the uiColor option.

    CKConfig: {
        customConfig : '/ckeditor/config.js', 
        toolbar: 'Basic',
        uiColor: '#dfe8f6',
        height : 200,
        width: 250
    } 

2. You can change the Skin.

    CKConfig: {
        customConfig : '/ckeditor/config.js', 
        toolbar: 'Basic',
        skin: 'v2', // skin: 'office2003',
        height : 200,
        width: 250
    } 

3. Create your own CKEditor Skin. You will have to work that one out yourself ;-)