CKEditor Extension

[damsfx]

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

Return an error if CKeditor field is rendered in a tabpanel not yet activate.
TabPanel has deferredRender set to default value (true).

[Kevin Park]

hi

Thanks for CKEditor Extension.

using well, but i have little problem.

code

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();

    alert(document.getElementById(this.id).value);
    => valid

    alert(Ext.form.TextArea.superclass.getValue(this));
    => undefined

    return Ext.form.TextArea.superclass.getValue(this);
    //return CKEDITOR.instances[this.id].getData();
  }
...
});

      items: {
        xtype: 'ckeditor',
        fieldLabel: 'Editor',
        name: 'htmlcode',
        CKConfig: {
          customConfig : '/_sys/_plugin/ckeditor/config.js',        
          toolbar: 'Full',
          skin: 'kama',
          height: this.getInnerHeight() - 10
        }
      }

"Ext.form.TextArea.superclass.getValue(this)"

why? return value is undefined. i don't know

please, help me?

thx.

[Kevin Park]

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);
  },

[edykstra]

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.

@armagedon,

Did you ever figure this out? I have the exact same issue.

Thanks

[cuinan]

Yeah. It’s good to be yourself. Same with you, I will try to do something. So I support your decision!

[uffe_w]

Hi, I am using multiple CKEditors placed on different tabs in a tabpanel. I noticed they did not get hidden correctly when changing tabs.
This helped me:


onHide: function(){
var el = CKEDITOR.instances[this.id].container.$;
el.style.display = 'none';
},

onShow: function(){
var el = CKEDITOR.instances[this.id].container.$;
el.style.display = '';
}

[Shane F]

Anyone ever get keyup/keydown/keypress events working for CKEditor extension?

[arnab_ghosh]

Hi Guys,

I have ran into a problem. In IE(Any version), I am getting a caching issue with ckEditor. After using it couple of times, the form always submits the old data. Any new updated data, which is entered into the editor, is not returned by the getValue method.

Here goes the extension code I am using:
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);
if(this.editor){
this.editor.destroy();
}
this.editor = 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 CKEDITOR.instances[this.id].getData();
},

getRawValue: function(){
CKEDITOR.instances[this.id].updateElement();
return CKEDITOR.instances[this.id].getData();
},

destroyInstance: function(){
if (CKEDITOR.instances[this.id]) {
delete CKEDITOR.instances[this.id];
}
}
});
Ext.reg('ckeditor', Ext.form.CKEditor);

This is how is use it in the form:

{
xtype: 'ckeditor',
name: 'emailBody',
id: 'ckeditor',
fieldLabel: this.eMailBodyText,
CKConfig: {
height: 270,
width: '96%'
}
}

I am using Ext JS 2.2.1. At this point I cannot upgrade the system also. Please suggest.
Can you please kindly help? Am I doing something wrong?
Thanks in advance for help.

[growler]

Hi Thanks for Extension

One bug has been founded - If put CKEditor into COLLAPSIBE panel - when you collapse it:
1. Destoy All data from from texarea(I think shouldnt be so =))
2. CKEDITOR go inactive - but it push SOURSE - then CKEDIOR go into active mode and I can redact again. But all the data was cleared.

Thanks.
Yeah my english is ...
... not So good as yours=)

[demon222]

What you're proposing a module for managing files, images, etc? (Except CKFinder)
Regards