CKEditor Extension

[jasonchen0309]

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 .

So nice...thx...

Wish you can make it to full version...

[armagedon]

@disfusion - thx very much for your work, it´s nice

Unfortunately the ckeditor-component does not respect the layout of the parent container. If the parent conatiner has layout set to 'fit' the ckeditor's height is not fitting. Also on resize. The width is always perfect.

Do you have some Idea how to fix this?
thx

[wehtam]

Thanks a lot for this extension.
That works perfect, but I have a little problem.
I would like change the content HTLM with a ajax fonction.
My code :

 {
                xtype: 'combo',
                fieldLabel: 'Template',
                store: ds_template,
                displayField:'LibelleTemplate',
                valueField: 'IdTemplate',
                hiddenName: 'IdTemplate', 
                typeAhead: true,
                mode: 'local',
                triggerAction: 'all',
                emptyText: 'Select...',
                selectOnFocus: true,
                forceSelection: true,
                editable: false,
                allowBlank: false,
                listeners: {
                    select: function(combo){
                    
                        Ext.Ajax.request({
                            url: '/ajaxInfoTemplate.php',
                            method: 'POST',
                            params: {
                                IdTemplate: this.getValue()
                            },
                            success: function(response, options){
                      CKEDITOR.instances.contenu.setData(response.responseText);
                   
                            }
                        });
                    }
                }
            },{
               xtype: 'ckeditor',
                fieldLabel: 'Contenu HTML',
                name: 'contenu',
				CKConfig: {
					customConfig : '/ckeditor/config.php', 
					toolbar: 'TEST',
					height : 400,
					width: 650				
				}
            }

When I select a value in my combo, I have the error "CKEDITOR.instances.contenu is undefined" with :

CKEDITOR.instances.contenu.setData(response.responseText);

Can you help me please ?
Thanks
ps : sorry for my very bad english

[wki01]

I have been playing with CKEditor and Ext JS. I stripped down the FCKEditor example.
seems not to work applyTo.

any ideas?
thanks

My example:

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>CKEditor Form</title>
    <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->
    <script type="text/javascript" src="ext-3.0.0/ext-all-debug.js"></script>
 
 <!-- Load CKEditor Library -->
 <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
 
 <!-- Load EXTJS CKEditor Extension -->
 <script type="text/javascript" src="ckeditor.js"></script>
 
 <!-- Load Example Code -->
 <script type="text/javascript" src="example.js"></script>
<body>
<!-- EXAMPLES -->
<h1>Example of CKEditor in a Form.</h1>
<textarea id="desc"  name="desc" rows="2" cols="20"></textarea>
</body>
</html>

example.js:

Ext.onReady(function(){
 new Ext.form.CKEditor({ 
     applyTo: 'desc', 
  CKConfig: {
   height : 200,
   width: 250
  }
 }); 
});

[Kapweb]

Hello,

good job, thanks !

I just put this modified code with the destroy instance :

/****************************************************
* 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);
    }
    ,onDestroy: function(){
        if (CKEDITOR.instances[this.id]) {
            delete CKEDITOR.instances[this.id]; // This destroy the instance
        }
    } 

});
Ext.reg('ckeditor', Ext.form.CKEditor);

Have a good day.
And sorry for my English, I'm french

Damien.

[panyi1982]

i have own file browser（design by ext3.1），how adding to ckeditor

[Kapweb]

Hi panyi1982 ,

Just read that :
http://docs.cksource.com/CKEditor_3....%28Uploader%29

All is explicated.

I do the same work. But my media browser not finish, so i can't help you for ck editor now.

Have a good Day !

And always sorry for my verry bad english.

[asagala]

if this extension is used in form with trackResetOnLoad: true it doesnt seem to respect the isDirty concept. Anyone have a clue how to fix it?

[ragam]

Great job done on ckeditor.

A small issue when using.

When i try to remove and add a ckeditor inside a panel the second which is getting added will not display.

Can any one help.

Thanksin advance

[ragam]

Good job