ExtJs + FCKeditor Form Field Extention

Hi there all…
I’m new in ExtJS and i have to admit it, it’s a very VERY good job…
So i’ve started using it and i liked it. The thing is that i needed something better than the default HTML editor so i turned to FCKeditor. My problem was that i didn’t find it usefull to manually convert every textarea I needed into FCK (as discussed in previous threads) because the fields are dynamically created inside dynamically created tabs etc. So i thought “how difficult would be to create an FCKeditor extension for the ExtJS Form Fields…”. Well, it is… I think this is why no one has done it yet…
Anyway, i have done something that, surprisingly enough, it works!!! I am almost certain that it’s not the optimum way to do it. This is why I’m asking for some help from anyone out there who could help to modify it and make it better, more useful and perhaps even a real extension…
In the following code, I’m Using FCKeditor 2.5 Beta and Ext JS Library 2.0 Alpha 1.
I’ve developed it based on the TextArea.js.
File ext.FCKeditor.js:
Code:
Ext.form.FCKeditor = function(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”,
style:”width:100px;height:60px;”,
autocomplete: “off”
};
}
Ext.form.TextArea.superclass.onRender.call(this, ct, position);
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.name+”‘);”,100);
},
setValue : function(value){
this.MyValue=value;
if (this.FCKid==0) this.FCKid=get_FCKeditor_id_value()
FCKeditorSetValue(this.FCKid,this.name,value)
Ext.form.TextArea.superclass.setValue.apply(this,[value]);
},
getValue : function(){
if (this.MyisLoaded){
value=FCKeditorGetValue(this.name);
Ext.form.TextArea.superclass.setValue.apply(this,[value]);
return Ext.form.TextArea.superclass.getValue(this);
}else{
return this.MyValue;
}
},
getRawValue : function(){
if (this.MyisLoaded){
value=FCKeditorGetValue(this.name);
Ext.form.TextArea.superclass.setRawValue.apply(this,[value]);
return Ext.form.TextArea.superclass.getRawValue(this);
}else{
return this.MyValue;
}
}
});
Ext.reg(‘fckeditor’, Ext.form.FCKeditor);
function loadFCKeditor(element){
oFCKeditor = new FCKeditor( element ) ;
oFCKeditor.ToolbarSet = sFCKeditorToolbar ;
oFCKeditor.Config['SkinPath'] = sFCKeditorSkinPath ;
oFCKeditor.Config['PreloadImages'] = sFCKeditorSkinPath + ‘images/toolbar.start.gif’ + ‘;’ +
sFCKeditorSkinPath + ‘images/toolbar.end.gif’ + ‘;’ +
sFCKeditorSkinPath + ‘images/toolbar.bg.gif’ + ‘;’ +
sFCKeditorSkinPath + ‘images/toolbar.buttonarrow.gif’ ;
oFCKeditor.BasePath = sFCKeditorBasePath ;
oFCKeditor.Config['BaseHref'] = sFCKeditorBaseHref ;
oFCKeditor.Height = 260 ;
oFCKeditor.ReplaceTextarea() ;
}
function FCKeditor_OnComplete(editorInstance){
Ext.getCmp(editorInstance.Name).MyisLoaded=true;
editorInstance.Events.AttachEvent(‘OnStatusChange’, function(){
Ext.getCmp(editorInstance.Name).setValue();
})
}
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) ;
if(oEditor!=undefined) oEditor.SetData(FCKeditor_value[id])
}
}
function FCKeditorGetValue(name){
if ((id!=undefined)&&(name!=undefined)){
var oEditor = FCKeditorAPI.GetInstance(name) ;
data=”;
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;
}
You have to load this file when you include the ext library and you also have to add this code (with the appropriate modifications to match your settings) after the inclusion:
Code:
var sFCKeditorToolbar = ‘Default’;
var sFCKeditorBasePath = ‘../clientscripts/FCKeditor/’;
var sFCKeditorBaseHref = ‘http://localhost/test/’;
var sFCKeditorSkinPath = ‘../editor/skins/office2003/’;
That’s it! In order to use it simply add the following lines in the items of a form. This will give you an FCKEditor in that form
Code:
{
xtype:’fckeditor’,
name:’content_1′,
id:’content_1′,
fieldLabel:’Content’,
height:270
}
I hope you got the main idea…
I look forward for any comments, suggestions, help, modifications, …., anything…
Let’s make it real…
StashX
_________________
source : http://www.sencha.com/forum/showthread.php?17423-2.0-A.1-FCKeditor-Form-Field-Extention