PDA

View Full Version : CKEDITOR with EXTJS 4



JesusM
6 May 2011, 3:17 AM
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
10 May 2011, 1:34 PM
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
11 May 2011, 1:26 PM
I think this code


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

makes a instance of ckeditor.

Dmoney
26 May 2011, 7:21 AM
Did you get this working? I need to explore alternatives to the htmlEditor.

dorgan
26 May 2011, 8:59 AM
Why explore alternatives?? Why not extend it you can add buttons and custom functionality.

Dmoney
26 May 2011, 9:30 AM
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
26 May 2011, 10:05 AM
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
20 Jun 2011, 1:19 PM
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) {


return this.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
22 Feb 2012, 6:50 AM
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
24 May 2012, 12:00 AM
Try to add the parameter "deferredRender : false" in you tabPanel

alekseyyp
11 Feb 2013, 5:51 AM
Thanks for this code.
~o)
Formatted one is here:


Ext.define('Ext.ux.CKeditor', { extend : 'Ext.form.field.TextArea',
alias : 'widget.ckeditor',
xtype: '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){
return this.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)
})
});

la_spi_man
22 Apr 2013, 5:40 AM
Hi all,
Can someone give me a simple sample to integrate cke please ?

Thank in advance.

I'm french

la_spi_man
23 Apr 2013, 2:56 AM
Hi all,
That s ok for now.
I'm using sencha architect and ckeditor 4. Works perfectly ....

conorarmstrong
13 Jun 2013, 7:51 AM
@alekseyyp

Think you might be missing a


CkConfig: {}


after you set the xtype, but before the initComponent method. Without it getting set to an empty object, the Ext.apply won't work as expected.

Esha
27 May 2014, 11:46 PM
Hi,

I am new to Ext JS. I need to display CKEditor on a tab. I dont khow how to integrate it with Ext Js. Can anyone explain this step by step ?

Thanks in advance :)

mdb
25 Jun 2014, 4:29 AM
Hi all,
That s ok for now.
I'm using sencha architect and ckeditor 4. Works perfectly ....
Hi,

How can you implement ckeditor in a sencha architect project? I know how to use it normally with Ext JS, but can't get it to work in Sencha Architect. Did you install it as a user extension?

Would be great if I can use it within architect too...