CKEDITOR with EXTJS 4

[JesusM]

Hello

I´m trying to adapt CKEDITOR in EXTJS 4 but I have the next error CKEDITOR.instances[this.id] is undefined in the line:

CKEDITOR.instances[this.id].setData(value);

In EXTJS 3 it works perfectly!

This is the code:

editorCK = Ext.create('widget.ckeditor',{
id:'editorCK',
CKConfig: {
customConfig : 'ckeditor/config.js',
toolbar: 'Basic',
height : 200,
width: 500
}

});






Ext.define('Ext.ux.CKeditor',{
extend: 'Ext.form.field.TextArea',
alias: 'widget.ckeditor',
initComponent: function(){
this.callParent(arguments);//Ext.ux.CKeditor.superclass.initComponent.apply(this, arguments);
},
onRender : function(ct, position){
if(!this.el){
this.defaultAutoCreate = {
tag: 'textarea',
autocomplete: 'off'
};
}
Ext.form.field.TextArea.superclass.onRender.call(this, ct, position);
CKEDITOR.replace(this.id, this.CKConfig);
},
setValue : function(value){
Ext.form.field.TextArea.superclass.setValue.apply(this,[value]);
CKEDITOR.instances[this.id].setData(value);
CKEDITOR.instances[this.id] is undefined

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

Can anyone help me, please?

Thanks!

[silcreval]

It doesnt look like you've instantiated CKEDITOR anywhere. Shouldnt you be
creating CKEDITOR in the initComponent method, ie

this.CKEDITOR = new .....

and then referring to it in the methods as

this.CKEDITOR

also you probably want to be using callParent(arguments) rather than superclass
in the method overrides.

Ian.

[codeart.ch]

I think this code

CKEDITOR.replace(this.id, this.CKConfig);

makes a instance of ckeditor.

[Dmoney]

Did you get this working? I need to explore alternatives to the htmlEditor.

[dorgan]

Why explore alternatives?? Why not extend it you can add buttons and custom functionality.

[Dmoney]

I looked into extending the htmlEditor but I couldn't make sense of it. Specifically I wanted to be able to select h1, h2, h3 tags. As I want to enable text editing but still maintain control over the style.

the other problem I have is pasting. I want to be able to paste as plain text. not only can I not paste as plain text in the htmlEditor if the text is plain text to begin with it's automatically wrapped in font and style tags.

[dorgan]

I would highly suggest looking at the src to the htmlEditor....when I needed to customize it thats what I did and found the proper functions to use to do everything I was trying to do.

[prout_boudin]

Dear all,

here is a full functionning code :

Ext
.define('Ext.ux.CKeditor',{

extend
:'Ext.form.field.TextArea',

alias
:'widget.ckeditor',



initComponent
:function(){


this.callParent(arguments);




this.on('afterrender',function(){



Ext
.apply(this.CKConfig ,{

height
:this.getHeight()


});


this.editor = CKEDITOR.replace(this.inputEl.id,this.CKConfig);


this.editorId =this.editor.id;


},this);




},

onRender
:function(ct, position){


if(!this.el){


this.defaultAutoCreate ={

tag
:'textarea',

autocomplete
:'off'


};


}


this.callParent(arguments)




},

setValue
:function(value){


this.callParent(arguments);


if(this.editor){


this.editor.setData(value);


}




},

getRawValue
:function(){


if(this.editor){


returnthis.editor.getData()


}else{


return''


}


}

});



　

CKEDITOR
.on('instanceReady',function(e){




var o = Ext.ComponentQuery.query('ckeditor[editorId="'+ e.editor.id +'"]'),

comp
= o[0];

e
.editor.resize(comp.getWidth(), comp.getHeight())

comp
.on('resize',function(c,adjWidth,adjHeight){

c
.editor.resize(adjWidth, adjHeight)


})

});

[mr.amin0]

I found a bug, I have a ckeditor in a tab panel, if i switch to a different tab before the editor is fully loaded, it collapses in firefox and IE. In IE even breaks so far the this.editor value is corrupt, and it won't respond to setvalue and getvalue.
In chrome it keeps working like it should.
Any advice ?

[Antjac]

Try to add the parameter "deferredRender : false" in you tabPanel