HZRN.COM
welcome to my space

Search:

hzrn.com

HOME

Homepage

Add to favorites

NAVIGATION -

HOME

[2.0 A.1] FCKeditor Form Field Extention

Published by: mike 2009-01-09

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:
Ext.form.FCKeditor = function(config){
Ext.form.FCKeditor.superclass.constructor.call(thi s, config);
this.FCKid=0;

Keywords Report: chado-software.com::
2 radspell safari fckeditor 2 spell check dll for pocket pc 2003 2 rich text ocx download 1 microsoft word protected form field spellcheck 1 purchase
http://spelltext.com/accesslog.keys.htmlHOME

Keith Rull - .NET::
In fact LINQBridge lets you use nearly all of the features in C# 3.0 with Framework 2.0—including extension methods, lambda functions and query
http://www.keithrull.com/CategoryView,category,.NET.aspxHOME

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(thi s,[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:

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 :)

{
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...B)
StashX

I think you need the folder above to make it work..

oFCKeditor.BasePath = "/fckeditor/"; <-- path to the folder above editor

Integrating FCKeditor with a Ext-JS is a nightmare if you're creating/destroying components with the editor. In one application I'm currently working on, IE6 leaks ~4-5 MB per instance of FCKeditor removed from the DOM.

I'm currently rewriting the application so that the form containing the editor is hidden/emptied when it's not in use, instead of creating a new component.

I've given up on it.

I have some troubles with this extension. It works fine in FF and Opera, but not in IE. Sometimes it works, but IE shows an error in FCKeditor source. But sometimes IE shows error "Can't execute code from a freed script" and BasicForm (in FormPanel) is not submitted ( nothig is sent TO server and "failure" function is called ). Any ideas? Does someone have similar problems?

I would be appriciate if you can link a live demo about this.

When using IE theres a (common) bug/mistake in the above plugin. There a , at the end of the right before a closing bracket.

So you have to change
if(!this.el){
this.defaultAutoCreate = {
tag: "textarea",
style:"width:100px;height:60px;",
autocomplete: "off",

};
}
to
if(!this.el){
this.defaultAutoCreate = {
tag: "textarea",
style:"width:100px;height:60px;",
autocomplete: "off"

};
}

Thanks for the great plugin anyway...

Hi Ian,

Yes, that's the first port of call when you want to start using anything, a demo page.

Actually I find the examples that come with the distribution much revealing than the online demos.

Animal for what you want to do, there's no doubt in my mind you'll have to do more than a bit of source code reading.

What part exactly is not working for you? Are you not getting the FCKeditor to display in the first place? That the problem?

The module above works only with FCKeditor versions less than 2.6, I tested it, and found that it works correctly only in Opera.

FCKEditor version 2.5 works in all browsers, but IE have a problem - It closes itself with internal error message after several getValue/setValue operations.
IE does this operations correct as expected, but after 2-3 (or sometimes 20-30) operations it just shuts up with the error.

It looks like the only problem for me to completly integrate FCKeditor into Ext, and I really dont know what to do with it.

Does anyone have an idea what happens ?
I can make a demo if needed..

How do I set a value to the editor to edit already existing content?

I tried through the 'value' key, but that bombed out the editor. I also tried through the setValue() method on the field, which loads the content but still produces the same error.

FCKeditorAPI is not defined
[Break on this error] var oEditor = FCKeditorAPI.GetInstance(name) ;

Hi,
I was facing the same problem. But i think it because of this:-

"The FCKeditorAPI object will not be available during the page load. You need to wait for the editor to be loaded to use it. If you need to interact with the editor right after is has been loaded, use the "FCKeditor_OnComplete" function (see "Events"). "

mentioned in site: http://wiki.fckeditor.net/Developer's_Guide/Javascript_API

kazukin6,

Thanks a lot, this code works!
The listing on the first page should be updated with this correct code.

I should read posts more carefully. Tvaland already wrote the same:
http://extjs.com/forum/showthread.php?p=182702#post182702

I think the author of this extension should update the source code in the first post.

Ok I forget to load the original fckeditor.js . After that there is no error message, but something goes wrong it looks like this:
http://munka.kapcsolatok.net/kepek/fckeditor.jpg

Nice job!;)
Working good in FF2 and IE7.
But Some errors in IE6.
How can I do?

Hi,

I read Michiel's post about fckeditor error:
FCKeditor is not defined
[Break on this error] oFCKeditor = new FCKeditor( element ) ;

Which path was wrong because I got the same message:

My program
Site URL: http://localhost/mmmoritel.hu/
my html run in a directory: http://localhost/mmmoritel.hu/modules/forum/

markjlacore.net | A Drupal test area.::
";s:12:\\"dependencies\\";a:1:{i:0;s:7:\\"content\\" .. the usage of FCKeditor (WYSIWYG) instead of plain text fields.
http://markjlacore.net/HOME

Man Pages - Manpage for mkisofs::
This helps to show rotten ISO9660 extension records as e.g. created by NERO Always make FCKEditor paste as plain text (Tuesday, November 11th 2008)
http://www.electrictoolbox.com/article/manpage/mkisofs/HOME

The extjs is under: http://localhost/mmmoritel.hu/extjs/
FCKEditor ext.FCKEditor.js: http://localhost/mmmoritel.hu/extjs/extensions/
FCKEditor: http://localhost/mmmoritel.hu/modules/editor
SKIN: http://localhost/mmmoritel.hu/modules/editor/editor/

My path in the programs:

PHP Code:

Can u tell me what I made wrong?
thanx in advance.

I'm trying to create an Ext.form.Field UX which encapsulates a FCKEditor.

What I need is to implement drag/drop from another DragSource into the editor. This bit is an absolute piece of cake compared to cimply getting an FCKEditor running! I have it working in an HtmlEditor, but the client uses FCKEditor, and so to be able to use DD from their stock of text sources, they have to switch between editing in FCKEditor and editing in HtmlEditor.

nice job:D!

but in my work

contentField:new Ext.form.FieldSet({
title: '填写正文',
collapsed :true, <<=============
autoHeight :true,
items :[{
hideLabel:true,
//xtype:'htmleditor',
height:320,
id:'content',
name: 'content',
xtype:'fckeditor'
}]
}),

use this code, when i expand the fieleset, my fckeditor will show blank:-? ,
but when i use 'collapsed :false,' it works fine.

Hi, I tried to use your code .. but a get an error on line 63 of ext.FCKeditor.js:

FCKeditor is not defined
[Break on this error] oFCKeditor = new FCKeditor( element ) ;

Am I doing something wrong?

Hi,

I've developed a new ux that works with 2.6+ and has other goodies such as complete replacement of the FCK dialogs with Ext dialogs. I'll be sharing that soon.

-m

FCKeditor works fine if there is only one instances running.
The second doesn't get in the INstances list, and therefore is not usable.
Any idea?

Now the only problem I'm facing is that the field is being submitted as a blank value, even though there is something in it...

I have not tried using the submit to post data.
But why not use FCKeditorGetValue() funciton and then put it in a textarea before posting it.

I still want to get something working quickly though, and I can't extract information from the FCK "docs".

Do you have to have a directory of a certain name "FCKeditor" or "fckeditor" or whatever at a certain position? How do you configure FCK. The configuration page just mentions confguration optins by name, but offers no clue about what they are: global variables, properties of a global namespace or what.

Thx

I can display fckeditor in my page, but :
with this code :

xtype:'fckeditor',
name:'fck_description',
id:'fck_description',
height:'100%',
width:'100%',
value:'test',

I have this error
FCKeditorAPI is not defined
var oEditor = FCKeditorAPI.GetInstance(name) ;

How do you initialise your fck field ?

Well, the incantation for getting over that was

this.FCKeditor.Config.ToolbarLocation = 'In';

You just have to set Config.ToolbarLocation to "In". That's the rule. That they don't mention.

So, now it alerts the error

Toolbar set "Default" doesn't exist.

I even tried

this.FCKeditor.Config.ToolbarSets = {"Default": [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea',' Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','Just ifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialCh ar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
]};

But it still alerts that. What do they want?

DjLiquidIce modified version ... use an object for entire configuration.
Can now overload entire Config options of FckEditor.

Same use as previous.

I�ve been using this one and it�s working fine, so, I need another feature but I don�t know wheter it�ll work or not.

I�m, trying to make this fckeditor object as an DDTarget. I just set it as one but I can�t drag any data over this object.

I think it�s because fckeditor uses a iframe, there�s any way to make it a DDTarget?

Thanks in advance.

If you're using FCKeditor in an Ajaxy application, where the component is destroyed/recreated several times, you may encounter problems due FCKeditor not cleaning up it's instance when the editor is removed from the DOM.

This code works for me (I don't use the plugin, but I think it should work):
Ext.form.FCKeditor = function(config){
Ext.form.FCKeditor.superclass.constructor.call(thi s, config);
this.FCKid=0;
this.MyisLoaded=false;
this.MyValue='';
this.on({beforedestroy: this.destroyInstance});
};

...

Ext.extend(Ext.form.FCKeditor, Ext.form.TextArea, {
destroyInstance: function(){
if (FCKeditorAPI.__Instances[this.name]) {
delete FCKeditorAPI.__Instances[this.name];
}
}
/* The rest of the methods */
});

Works on FCKeditor 2.6.1 in IE6/FF2 with my component.

I use the latest code from this thread with all further patches. In FF everything works, but in IE6 no editor is even shown while no errors occur. Just empty area without any errors... What is wrong?

Thank's a a lot Gregory.

I'm still getting an error on this line :
Ext.getCmp(editorInstance.Name).MyisLoaded=true;
Ext.getCmp(editorInstance.Name) has no properties

But the value is correctly set on the Editor. :-?
Tying to find why ....

Set id in the config

items:[{
xtype:'hidden',
name:'aid',
value:aid,
width:200,
},{
fieldLabel: 'Title',
name:'aname',
width:200,
},{
xtype:'fckeditor',
fieldLabel: 'Description',
name:'atext',
id:'atext',
width:300,
height:350
}]

I also got the permisison denied error on IE7.

Sorry .. my bad. There was an error in the path to fckeditor.js. The script works fine. Thanks!

The disappearing problem was concerned with DOCTYPE. Though, FCK used IFRAME and i used xhtml strict, nothing appeared (although, FF showed that IFRAME within strict mode :-/).

I have switched to quirks mode (hrrrrrr) and the editor is shown now.

But, sometimes it does not display its content. I believe, there is some synchronization problem between the field rendering and the form data loading.

After lots of tries I decided to do form loading after fck is 'complete'. To conform at least event technique of ExtJS I modified the plugin slightly:

function FCKeditor_OnComplete(editorInstance){
var fckComponent = Ext.getCmp(editorInstance.Name);
fckComponent.MyisLoaded=true;
fckComponent.fireEvent('complete');
}

So, the form loading function is attached to 'complete' event of an editor in the form:

{
xtype: 'fckeditor',
fieldLabel: _('Text'),
name: 'text',
id: 'xb_fck_text1',
width: 360,
height: 350,
listeners:
{
complete: function ()
{
var formPanel = popupWindow.findByType('form')[0];

formPanel.getForm().load
(
{
params: {action: 'LoadItem'},

success: function (form)
{
alert('success');
},
failure: function ()
{
}
}
);
}
}
}

The problem in IE is that success handler will never be called because of error like 'permissions denied' on oEditor.GetData() call. (the underlaying algorithm is something like 'on success Ext.form.Acton.Load calls BasicForm.setValues() which triggers FCKeditorGetValue() call through a chain of calls. That FCKeditorGetValue() in the plugin contains oEditor.GetData() call which results in permission failure')

Any help appreciated...

Now the only problem I'm facing is that the field is being submitted as a blank value, even though there is something in it...

Hi,

I'm having this issue as well. Could you provide an example of your solution?

Thanks

Try to replace

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;

}

},

with

getValue : function(){

if (this.MyisLoaded){

value=FCKeditorGetValue(this.name);

Ext.form.TextArea.superclass.setValue.apply(this,[value]);

return Ext.form.TextArea.superclass.getValue.call(this);

}else{

return this.MyValue;

}

},

I found another little trouble about fckeditor in Extjs.

I�d tried to put it and a TreePanel into a Panel, which is in a TabPanel, which is in a FoemPanel.

I�d set the TreePanel width to 200 and so, I wanted the FckEditor to fit the Panel.

If I use the table layout, the table that is created to Panel doesn�t fit the TabPanel, otherwise, if I use the column layout it fits and work fine in IE, but in FF the FCKeditor position is set bellow the TreePanel.

Someone know how to solve it?

Thanks in advance.

This extand validate method always return false!

here are some screen shots from action :D

I read that and defered the setValue function until it is loaded, which took care of the error.

Now the only problem I'm facing is that the field is being submitted as a blank value, even though there is something in it...

Hi,

I'm having this issue as well. Could you provide an example of your solution?

1 DesignCAD 3 BBS: A Documentary 2 Evolution Computing, Inc. 4 Bit ::
15362 FCKeditor 15363 Compulsion Software 15364 Purple Watermelon 15366 The JavaDoc Documentation Tool 19031 Form Processing API 2.0 19032 Microsoft
http://ce.sharif.edu/~f_vafaee/result/DocTitles.txtHOME

eLearn: Moodle English Book (Creating a book - MoodleDocs)::
JPG - MoodleDocs · 260 Development:Database fields - MoodleDocs For example letters: in chapter title type "A First Chapter", "A.1 Some Subchapter", .
http://elearn.nur.ac.rw/mod/book/view.php?id=1483&chapterid=5971HOME

Thanks

Anyone ever got this f*ckEditor working?

I did a little while back. I will have a look on my dev laptop later and see if I can dig out the example.

Alex

Hi ...

I've taken these advices for using FCKEditor with ExtJS, but I have a problem in IE 6 and 7.

I get a script error PERMISSION DENIED on some FCK line ... If i take the same editor and put it in Ext free script and load it I don't get this error so my guess is that something might be accessed/triggered by ExtJs lib and that's what's causing the problem ... anybody else experienced anything like that ? ...

Thank you

Armando

So what files to I have to include to get this FCKeditor thing functioning?

People moan about the Ext docs, but the docs at fckeditor.net are awful.

THis is just crap: http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Integration/JavaScript

Doesn't work.

So I have the whole of the FCL installation /editor directory in my webapp under the directory '/FCLeditor'

SO what do I need to include?

I have ""

The code is all minified to you can't debug it. It just reports things like "C is not defined".

Anyone ever got this f*ckEditor working?

It alerts that message "Toolbar set "Default" doesn't exist."

And then doesn't show. The iframe is created, it's just non-functioning, and there is no appearance, no styling at all. I only know it's there by examining the DOM in Firebug.

I can't imagine where to look.

So has ANYONE come up with a way to get this horrible thing running?

Just how do you get an FCKEditor running? People slag off Ext docs, but Ext docs are just absolutely FANTASTIC compared to this thing. How do you run an FCKEditor?

All those strange URLs.. they're for what, pointing to what???? And then it goes off to some URL you never pointed to, and can't access it!!

Is it just me or is FCK a real pile of FCKing crap?

have you looked at http://www.fckeditor.net/demo ?
...that how i got started and it wasn't fiddly.

your page needs to call the default config - fckconfig.js - as detailed on this page:
http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_File

Hope this helps!

I have. It took a lot of long hours, mostly because I've never used any of the WYSIWYG editors before. Also because FCK - as opposed to the other options - provides much more separated code and lots of configuration options. Add to that the server side stuff and it will require lots of reading to get it a handle on it.

Reading is the key. But you're definitely correct about dismal docs. Reading code along with trial and error will get you there as always though.

That said - in hindsight - it's quasi-modular code base probably make it easier to integrate with Ext than the other options.

I'm still not ready to put anything out in the public, but I'm hoping to become the maintainer of a solid ux for this before the year is up. I've got some of the dialogs converted to Ext and I'm now dabbling with the toolbar stuff. Paid work still keeps me away from spending as much time with it as I'd like.

Sneak a peek here: http://www.innernine.com/etc/extfck.mov

Hang in there people...
-m

mirage, thank you.
Your effort is very appreciated

Nice Job, Can you post this on the extensions page...

http://extjs.com/learn/Ext_Extensions

Thanks

Ditto!!

My preliminary tests show that this sucker is awesome and works!

samadhi:
Did you receive a "Can't execute code from a freed script" error? Then check please if an error occures when the instance name have changed.

Some ideas from me and debugger and 5:48 AM...

/_source/fckeditorapi.js:42
We see an FCKeditorAPI object. Every time when we create an editor instance, it add itself to FCKeditorAPI.Instances:

FCKeditorAPI.Instances[ FCK.Name ] = FCK ;

Stack:
fckeditor.html:172
fckeditorapi.js:139

And every time when a form with editor instances is submitted FCKeditorAPI._FormSubmit (fckeditorapi.js:52) is called. But old instances of editor are in the FCKeditorAPI.Instances container. Frames where they are created are destroyed and anonymous functions such as FCK.GetParentForm based (fck.js:54) destroyed too. When we try to call this function (fckeditorapi.js:57), IE throws the "Can't execute code from a freed script" error.

I haven't find nothing better then destroy an old instances when their form is submitted.

fckeditorapi.js:57

if ( oEditor.GetParentForm && oEditor.GetParentForm() == this )
oEditor.UpdateLinkedField() ;

I've replacet with this

if ( oEditor != undefined && oEditor.GetParentForm && oEditor.GetParentForm() == this )
{
oEditor.UpdateLinkedField() ;
FCKeditorAPI.Instances[ name ] = undefined
}

Now my script works fine, but I don't like this solution.

Does anyone have ideas about it?

__ UPDATED __
Hm.. I've solved the problem more easy... Just add "onDestroy" handler to FCKeditor constructor:

Ext.form.FCKeditor = function(config){
this.config = config;
Ext.form.FCKeditor.superclass.constructor.call(thi s, config);
this.FCKid=0;
this.MyisLoaded=false;
this.MyValue='';
this.on('destroy', function(){
delete FCKeditorAPI.Instances[ config.name ];
});
};

Wow! Very impressive demo. I love the Ext theming of FCK. I thought you had popped up an Ext.form.HtmlEditor until you told us that you had themed FCK to look like Ext.

Thanks. I actually think toolbar still looks awful, but I'll take the compliment :-)

I didnt see such error, but the IE behavior was the same as you described.

I tested your code, and now it works much more stable !

Thank you!

Nice Job, Can you post this on the extensions page...

http://extjs.com/learn/Ext_Extensions

Thanks

Hi Ian,

Yes, that's the first port of call when you want to start using anything, a demo page.

But compared to Ext's demos which have clear, simple Javascript files included which you can read, I don't find it much help.

I tried to use Firebug (Use Firebug in a Demo page which is supposed to illustrate how "easy" it is? That seems wrong.) to find the script file which contains "new FCKEditor()" to find out how that page works.

I couldn't find that statement. In their demo page, I couldn't not find the code they are supposed to be demonstrating. Then if you compare what they have with a demo of a part of Ext that is supposed to be difficult: http://extjs.com/deploy/dev/examples/dd/dragdropzones.html We have a "View source" button that pops up commented source code!

The annoying thing is that their code is obfuscated and compressed. I'm always willing to read the source and step through executing code and see what's going on, but I now have an error which just says

C is undefined
http://localhost:8000/hoggy/FCKeditor/editor/js/fckeditorcode_gecko.js
Line 99

And as you might imagine, line 99 is a huge long line of compressed code, so I don't really know what it wants.

The call stack at that point is

FCKToolbarSet_Create(undefined)fckedito..._gecko.j s (line 99)
LoadToolbar()fckedito...r=Default (line 194)
LoadToolbarSetup()fckedito...r=Default (line 189)
onload()()

The last unobsucated code is

function LoadToolbar()
193{
194 var oToolbarSet = FCK.ToolbarSet = FCKToolbarSet_Create() ;
195
196 if ( oToolbarSet.IsLoaded )
197 StartEditor() ;
198 else
199 {
200 oToolbarSet.OnLoad = StartEditor ;
201 oToolbarSet.Load( FCKURLParams['Toolbar'] 'Default' ) ;
202 }
203}
204

Any ideas?

Modified so height is honored:

Example usage:

new Ext.form.FormPanel({
labelAlign : 'right',
method : 'GET',

buttonAlign : 'center',
//url: 'docInsertUpdate.php',
labelWidth : 80,
frame : true,
defaultType : 'textfield',
items : [{
name : 'alarmCode',
width : 450,
fieldLabel : 'Alarm Code'
},{
name : 'alarmText',
width : 450,
fieldLabel : 'Alarm Text'
},{
xtype : 'fckeditor',
name : 'documentBody',
id : 'documentBody',
fieldLabel : 'Document',
height : 400
}
]
});

I also got the permisison denied error on IE7.

I also get this error in IE 7, the editor still works, but what a drag.

I traced the error to the following:

function FCKeditor_OnComplete(editorInstance){

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

//editorInstance.Events.AttachEvent('OnStatusChange' , function(){
//Ext.getCmp(editorInstance.Name).setValue();
Ext.getCmp(editorInstance.Name).setValue(Ext.getCm p(editorInstance.Name).value); <====Comment this line out and IE will not give you the permission denied error.
//})
}

I've been testing the code with this line commented out and it seems to work just fine in IE and FF, not really sure what it does thought

Wow! Very impressive demo. I love the Ext theming of FCK. I thought you had popped up an Ext.form.HtmlEditor until you told us that you had themed FCK to look like Ext.

Well I set it to "http://localhost:8080/myApp/FCKeditor/", but I get

HTTP Status 404 - /fckeditor/editor/fckeditor.html

in the iframe

Could you post your entire initialization code for the editor?

I read that and defered the setValue function until it is loaded, which took care of the error.
Any example for that ?
I'm still getting an error when trying to set the default value of the editor.

I was having the same problem that damsfx was having.

Thank's a a lot Gregory.

I'm still getting an error on this line :
Ext.getCmp(editorInstance.Name).MyisLoaded=true;
Ext.getCmp(editorInstance.Name) has no properties

But the value is correctly set on the Editor. :-?
Tying to find why ....

Since I have a Ext Window that contains my Fckeditor and it is reused for different elements and I also reuse that window with in multiple tab panels. I found that putting an id on the form element would not work for me, because when the element is reused I would end up with the ID being reused. So I have reworked the code get FCKEditor to use the Temp ID's that EXT creates when it creates the form element.

This code is based on Example Gregory posted (http://extjs.com/forum/showthread.php?p=110987#post110987)

/************************************************** **
* FCKEditor Extension
************************************************** ***/
var oFCKeditorOptions = {
BasePath : 'js/fckeditor/' ,
Config : {
BaseHref : window.location ,
SkinPath : '../editor/skins/office2003/' ,
ProcessHTMLEntities : true ,
ProcessNumericEntities : false
},
ToolbarSet : 'Default'
};

Ext.form.FCKeditor = function(config){
this.config = config;
Ext.form.FCKeditor.superclass.constructor.call(thi s, 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);
//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.config.height +");",100); //Change this.name to this.id
},
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(thi s,[value]);
return Ext.form.TextArea.superclass.getRawValue(this);
}else{
return this.MyValue;
}
}
});
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;
}

I basically changed all the this.name to this.id, which causes the fckeditor to pick up the id of the textarea instead of the name. If an id is set on the textarea field element it would still use it.

I also removed the
editorInstance.Events.AttachEvent('OnStatusChange' , function(){
Ext.getCmp(editorInstance.Name).setValue(Ext.getCm p(editorInstance.Name).value);
})
that was in the FCKeditor_OnComplete. I agree with johnbarbic it does not appear to be needed and is causing an error in IE.

Regards
Daniel

So my total config is now

this.FCKeditor = new FCKeditor( element );
this.FCKeditor.Config.ToolbarSet = "Default";
this.FCKeditor.Config.ToolbarSets = {"Default": [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea',' Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','Just ifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialCh ar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
]};

this.FCKeditor.Config.ToolbarLocation = 'In';
this.FCKeditor.Config['SkinPath'] = this.sFCKeditorSkinPath;
this.FCKeditor.Config['PreloadImages'] = this.sFCKeditorSkinPath + 'images/toolbar.start.gif' + ';' +
this.sFCKeditorSkinPath + 'images/toolbar.end.gif' + ';' +
this.sFCKeditorSkinPath + 'images/toolbar.bg.gif' + ';' +
this.sFCKeditorSkinPath + 'images/toolbar.buttonarrow.gif';
this.FCKeditor.BasePath = this.sFCKeditorBasePath;
this.FCKeditor.Config.CustomConfigurationsPath = '';
this.FCKeditor.Config.PluginsPath = this.sFCKeditorBasePath;
this.FCKeditor.Config.ContextMenu = {};
this.FCKeditor.BasePath = this.sFCKeditorBasePath;
this.FCKeditor.ReplaceTextarea();

I actually edited that compressed fckeditorcode_gecko file and added line breaks so I could debug it in Firebug.

I found where that alert is made, added a breakpoint before it.

Turns out that a variable FCKConfig contains the configuration, but the property ToolbarSets has been changed to the string "[object] [object]"!

They cannot be serious. It's unusable.

All the further text concerns IE:

I have discovered, that editor does not appear when field label is shown. 'hideLabel: true' of Ext.form.TextArea solves this problem, but no form content loaded with BasicForm.load() appears in the editor. The only content which is shown in the editor is the content set with 'value' property.

Any help appreciated...

Great job everyone... Here another method to do it in a panel that if is resized then Fckeditor followed too.

new Ext.Panel({
//title:'Section content',
id:'RootPanel',
layout:'card',
activeItem:0,
baseCls:'',
items:[{
xtype:'form',
id:'formPanel',
title:'Html',
items: [{
hideLabel:true,
xtype:'textarea',
name:'html',
id:'html',
height:Ext.getCmp('RootPanel').getInnerHeight()-51,
width:'100%',
value:"html...",
listeners:{
render:function(element){
oFCKeditor = new FCKeditor(element.id);
oFCKeditor.BasePath = oFCKeditorOptions.BasePath;
oFCKeditor.ToolbarSet = oFCKeditorOptions.ToolbarSet;
oFCKeditor.Config = oFCKeditorOptions.Config;
oFCKeditor.Height = element.height;
oFCKeditor.ReplaceTextarea();

Ext.getCmp('formPanel').on('resize', function(panel, width, height) {
var oEditor = FCKeditorAPI.GetInstance('html') ;
oEditor.EditorWindow.parent.frameElement.height = height-51;
});
}
}
}],
bbar:[{
text:'Save'
}]
}]
});

I modify also the fckEditor office 2003 theme to look even better inside a panel.

/* Here the changed - commented lines of skins/office2003/fck_editor.css */
#xEditingArea
{
/* border: #696969 1px solid; */
}

.TB_ToolbarSet
{
/*
border-top: #f7f8fd 1px outset;
border-bottom: #f7f8fd 1px outset;
*/
}

.TB_SideBorder
{
/* background-color: #696969; */
}

Have nice implementation !