CKEditor Extension

[growler]

CKFinder - is good. I use CKEditor just because it supported by CKFinder

[y.pagles]

I have a modified version of the ck editor embedding code in: http://gist.github.com/642171 that solves the problems when adding in multiple tab panels and a few more I could spot. Please tell me if I 'm missing something.

[demon222]

how to integrate their solution with CKFinder?
might like the following?:

....

    Ext.ux.form.CKEditor.superclass.constructor.call(this, this.config);
};

Ext.extend(Ext.ux.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);
		CKFinder.setupCKEditor( null, '/media/js/ckfinder/' ); // patch to ckfinder folder
        CKEDITOR.replace(this.id, this.config.CKConfig);
    },
    
    setValue : function(value){
        Ext.form.TextArea.superclass.setValue.call(this,[value]);
        var ck = CKEDITOR.instances[this.id];
....

and what ckeditor field validation?????????

Regards

[letux]

i have the same problem than arnab_ghosh. On IE, I have every time the old value. Any idee?

[Sean Chow]

thanks for sharing,that's great

[wdp]

修改了一下，解决了form.getForm().getFieldValues(false);取不到值的bug

/*******************************************************************************
 * 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, {
			hideLabel : true,
			constructor : function(config) {
				config = config || {};
				config.listeners = config.listeners || {};
				Ext.applyIf(config.listeners, {
							beforedestroy : this.onBeforeDestroy
									.createDelegate(this),
							scope : this
						});
				Ext.form.CKEditor.superclass.constructor.call(this, config);
			},
			onBeforeDestroy : function() {
				this.ckEditor.destroy();
			},
			onRender : function(ct, position) {
				if (!this.el) {
					this.defaultAutoCreate = {
						tag : "textarea",
						autocomplete : "off"
					};
				}
				Ext.form.TextArea.superclass.onRender.call(this, ct, position);
				this.ckEditor = 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();
				this.value = CKEDITOR.instances[this.id].getData();
				return Ext.form.TextArea.superclass.getValue.apply(this);
			},

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

[demon222]

how to dynamically replace the textarea field to ckeditor field using the button label such as a textarea field???

[felenka]

As it's known, the CKEditor uses iframe to display the content, therefore you cannot "catch" when data are changed using the standard methods

This is a little "trick" that might be useful when you do need to know if data in CKEditor has been changed or not

The ckeditor field definition looks like:

{
    name: your_name,
    id : your_id,
    xtype : 'ckeditor',
    CKConfig: YourCustomConfig,
    value: your_value
    /*... anything else ...*/
}

Then, after the CKEditor is loaded and initialized, you can "catch" the onBlur event of iframe and identify if data has been changed:

if ( Ext.getCmp(your_id) ){
    CKEDITOR.instances[your_id].on("instanceReady", function(){
        CKEDITOR.instances[your_id].on('blur', function(){
           var obj = Ext.getCmp(your_id);
           if ( obj && obj.originalValue != CKEDITOR.instances[your_id].getData() ){
                   // data changed - do something!
           } 
        });
    });
}

your_id - should be the same in CKEditor definition and "catcher"

I haven't set up listener on "keyup" or "keydown" events but you may try them as well

[borillo]

Hi all,

There's any workaround to stablish the height of the CKEditor in order to fit to an existing layout?

Regards,
Ricardo

[Zolcsi]

understand my English is poor.

I found the answer is shown below. Right?

  getValue : function(){   
    CKEDITOR.instances[this.id].updateElement();     
    var value=CKEDITOR.instances[this.id].getData();
    Ext.form.TextArea.superclass.setValue.apply(this,[value]);
    return Ext.form.TextArea.superclass.getValue.apply(this);
  },

Here is a slight modification to the code above:

getValue : function(){
if(!Ext.isEmpty(CKEDITOR.instances[this.id]))
{
CKEDITOR.instances[this.id].updateElement();
var value=CKEDITOR.instances[this.id].getData();
Ext.form.TextArea.superclass.setValue.apply(this,[value]);
}
return Ext.form.TextArea.superclass.getValue.apply(this);
},

With this it works when the ckeditor component is not rendered