PDA

View Full Version : CKEditor Extension



iosoftgame
30 Aug 2009, 1:52 AM
Hello.

First of all, I would like to say that I'm not sure if this is the right forum for this question ;) But anyway, here it goes:

I have been searching for an extension to ExtJS that will enable me to use CKEditor inside an ExtJS application, instead of the HtmlEditor ExtJS offeres, but I can't seem to find one.

My question is therefore: Does there exists an CKEditor extension to ExtJS and if so, where can I download it?

In advance, thanks.

Best regards
Morten Johansen

sidaliextjs
30 Aug 2009, 2:43 AM
Hi
I think that is delivered with Group Office Community edition
here is the code :)


/****************************************************
* FCKEditor Extension
*****************************************************/


Ext.form.FCKeditor = function(config){
this.config = config;
Ext.form.FCKeditor.superclass.constructor.call(this, config);
this.FCKid=0;
this.MyisLoaded=false;
this.MyValue='';
};

Ext.extend(Ext.form.FCKeditor, 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);
//Hide textarea to stop flashing up before FCKEditor renders.
this.hideMode = "visibility"; // set hideMode to visibility, to retain height.
this.hidden = true; // hide textarea

if(this.grow){
this.textSizeEl = Ext.DomHelper.append(document.body, {
tag: "pre", cls: "x-form-grow-sizer"
});
if(this.preventScrollbars){
this.el.setStyle("overflow", "hidden");
}
this.el.setHeight(this.growMin);
}
if (this.FCKid==0) this.FCKid=get_FCKeditor_id_value()


setTimeout("loadFCKeditor('"+this.id+"',"+ this.container.getHeight() +");",100); //Change this.name to this.id


//this.on('resize', this.textAreaResized, this);
},
setValue : function(value){
this.MyValue=value;
if (this.FCKid==0) this.FCKid=get_FCKeditor_id_value();
// only after FCKeditor_OnComplete
if (this.MyisLoaded){
FCKeditorSetValue(this.FCKid,this.id,value); //Change this.name to this.id
} else {
//alert('MyisLoaded = false');
}
Ext.form.TextArea.superclass.setValue.apply(this,[value]);
},

getValue : function(){
if (this.MyisLoaded){
value=FCKeditorGetValue(this.id); //Change this.name to this.id
Ext.form.TextArea.superclass.setValue.apply(this,[value]);
if (Ext.form.TextArea.superclass.getValue(this))
return Ext.form.TextArea.superclass.getValue(this);
else
return value;
}else{
return this.MyValue;
}
},

getRawValue : function(){
if (this.MyisLoaded){
value=FCKeditorGetValue(this.id); //Change this.name to this.id
Ext.form.TextArea.superclass.setRawValue.apply(this,[value]);
return Ext.form.TextArea.superclass.getRawValue(this);
}else{
return this.MyValue;
}
},

textAreaResized : function(textarea, adjWidth, adjHeight, rawWidth, rawHeight){

if(typeof(FCKeditorAPI)!= 'undefined')
{
var oEditor = FCKeditorAPI.GetInstance(this.FCKid);
oEditor.EditorWindow.parent.frameElement.height = rawHeight-51;
oEditor.EditorWindow.parent.frameElement.width = rawWidth;
}
}
});
Ext.reg('fckeditor', Ext.form.FCKeditor);


function loadFCKeditor(element, height){
oFCKeditor = new FCKeditor( element );
oFCKeditor.BasePath = oFCKeditorOptions.BasePath;
oFCKeditor.ToolbarSet = oFCKeditorOptions.ToolbarSet;
oFCKeditor.Config = oFCKeditorOptions.Config;
oFCKeditor.Height = height;
oFCKeditor.ReplaceTextarea();


}
function FCKeditor_OnComplete(editorInstance){

Ext.getCmp(editorInstance.Name).MyisLoaded=true;

// Removed OnStatusChange element, does not appear to be need, cause permission error in IE
}
var FCKeditor_value=new Array();
function FCKeditorSetValue(id,name,value){
if ((id!=undefined)&&(name!=undefined)){
if (value!=undefined) FCKeditor_value[id]=value;
else if (FCKeditor_value[id]==undefined) FCKeditor_value[id]='';
var oEditor = FCKeditorAPI.GetInstance(name);
// some trouble in Opera 9.50
if(oEditor!=undefined) oEditor.SetData(FCKeditor_value[id]);
}
}
function FCKeditorGetValue(name){
if ((id!=undefined)&&(name!=undefined)){
data='';
var oEditor = FCKeditorAPI.GetInstance(name);
// some trouble in Opera 9.50:
//
// message: Statement on line 36: Cannot convert undefined or null to Object
// oEditor.GetData();
//
if(oEditor!=undefined) data=oEditor.GetData();
return data;
}
}
var FCKeditor_id_value;
function get_FCKeditor_id_value(){
if (!FCKeditor_id_value){
FCKeditor_id_value=0;
}
FCKeditor_id_value=FCKeditor_id_value+1;
return FCKeditor_id_value;
}

Enjoy!

wki01
7 Sep 2009, 2:40 AM
My knowledge of ExtJS are still too poor to understand what I do.

Can someone post a working example with ExtJS 3.0 and CKEditor 3.0?

thanks

Alex84
9 Sep 2009, 12:40 AM
Hm I tested it today. Replace


oFCKeditor = new FCKeditor( element );with


oFCKeditor = new CKEDITOR.replace(element);And it works. I have the editor in a Tabpanel. Only the sizing not work correctly at the moment. The editor is smaller than my window and I can resize the editor in the window manually :D

Edit:
for Height replace

oFCKeditor.Height= height;
with

oFCKeditor.config.height = height;

here is a link to the docs: http://docs.fckeditor.net/ckeditor_api/symbols/CKEDITOR.config.html

wki01
9 Sep 2009, 12:54 AM
A small complete example I would be very useful.
thanks

Alex84
9 Sep 2009, 1:09 AM
Here is a complete example for using FCKEditor Extension
http://www.extjs.com/forum/showthread.php?t=17423

When this works replace the two lines I posted and set the correct paths to CKEditor.

disfusion
13 Sep 2009, 8:44 PM
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 :).

Alex84
13 Sep 2009, 10:31 PM
add a destroy Instance:


,destroyInstance: function(){
if (CKEDITOR.instances[this.id]) {
delete CKEDITOR.instances[this.id];
}
}

iosoftgame
14 Sep 2009, 5:37 AM
Great, thanks for sharing :)

I got a question: Is there a way to make CKEditor styled (themed) like ExtJS?
I mean, right now CKEditor doesn't really blend in with the rest of the ExtJS theme.

disfusion
14 Sep 2009, 4:46 PM
You have a couple of choice to change how it looks.

1. You can change the uiColor option.


CKConfig: {
customConfig : '/ckeditor/config.js',
toolbar: 'Basic',
uiColor: '#dfe8f6',
height : 200,
width: 250
}


2. You can change the Skin.


CKConfig: {
customConfig : '/ckeditor/config.js',
toolbar: 'Basic',
skin: 'v2', // skin: 'office2003',
height : 200,
width: 250
}


3. Create your own CKEditor Skin. You will have to work that one out yourself ;-)

jasonchen0309
30 Sep 2009, 1:57 AM
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
6 Oct 2009, 8:21 AM
@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
28 Oct 2009, 3:42 AM
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
4 Dec 2009, 2:19 AM
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
12 Jan 2010, 9:56 AM
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
18 Jan 2010, 9:46 AM
i have own file browser(design by ext3.1),how adding to ckeditor

Kapweb
18 Jan 2010, 10:54 AM
Hi panyi1982 ,

Just read that :
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_%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
25 Jan 2010, 1:29 PM
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
3 Mar 2010, 5:55 AM
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
4 Mar 2010, 9:12 PM
Good job

damsfx
9 Mar 2010, 8:10 AM
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
11 Mar 2010, 3:04 AM
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
11 Mar 2010, 6:04 PM
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
14 Mar 2010, 8:57 AM
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
14 Mar 2010, 5:16 PM
Yeah. It’s good to be yourself. Same with you, I will try to do something. So I support your decision!

uffe_w
24 Mar 2010, 5:41 AM
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
26 May 2010, 10:07 AM
Anyone ever get keyup/keydown/keypress events working for CKEditor extension?

arnab_ghosh
30 Jun 2010, 6:39 AM
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
22 Sep 2010, 3:38 PM
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
23 Sep 2010, 1:29 PM
What you're proposing a module for managing files, images, etc? (Except CKFinder)
Regards

growler
24 Sep 2010, 4:05 AM
CKFinder - is good. I use CKEditor just because it supported by CKFinder

y.pagles
23 Oct 2010, 4:56 AM
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
25 Oct 2010, 10:59 AM
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
23 Nov 2010, 3:33 AM
i have the same problem than arnab_ghosh (http://www.sencha.com/forum/member.php?46944-arnab_ghosh). On IE, I have every time the old value. Any idee?

Sean Chow
7 Dec 2010, 9:34 PM
thanks for sharing,that's great :)

wdp
8 Dec 2010, 12:02 AM
修改了一下,解决了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
7 Mar 2011, 3:31 PM
how to dynamically replace the textarea field to ckeditor field using the button label such as a textarea field???

felenka
15 Mar 2011, 6:26 AM
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
17 May 2011, 11:33 PM
Hi all,

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

Regards,
Ricardo

Zolcsi
5 Sep 2012, 9:16 AM
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

uwolfer
24 Feb 2014, 12:48 AM
I have fixed some bugs (e.g. multiple calls to setValue, better inital size support) and implemented new things like better event support (focus, blur, change). Also there are some examples available.

https://github.com/tocco/extjs3-ckeditor-extension