Structure of the FCKeditor

When you are creating a plugin, one of the most repeated questions are the relationship between the editor, the original document, how to access the API..., I hope that this post helps someone to clarify his/her understanding

Traversing the page

Let's imagine that you have a simple page, and you create an editor instance in it (let's assume that you have named it FCKeditor1), it would be something like this sctructure

First we have your document, with the form that will be submitted. Inside it there's a generated iframe that will hold the toolbar (unless you have specified an external location) and the editing area. This editing area is in fact a third iframe

From your document you can call FCKeditorAPI.GetInstance("FCKeditor1") to get a reference to the FCKeditor instance. One of the properties of this object is .EditorWindow that returns a reference to the iframe window number 3. Remember that this window is destroyed when the user switch to source view, so don't cache it, get the reference when you need it and check that it isn't null.

When you create a plugin it runs in the content of the second iframe, and you can get a reference to the current FCKeditor instance via the FCK object, so you can check again FCK.EditorWindow to get a reference to the third iframe (where the edited content lives)

To get a reference from your plugin to the parent document, one of the best ways is to use the LinkedField property of the FCK object, it holds a reference to the <textarea> or <input> that will be submitted with the content of the editor, so this way you can check anything that you want about that field or about its form.

The most important point is: get a reference to the FCKeditor instance and then move up or down from that point. Don't try to guess, there are clear and easy ways that will make your life easier

What happens when I launch a popup?

If you are using a new window, (via window.open) from your plugin then you can get a reference to the instance reading from your popup the window.opener.FCK property.

If you are using the FCKDialogCommand to launch the new dialog (this is the recommended way unless you have a special requirement), then you get a reference to the window object of the second iframe when you call the window.parent.InnerDialogLoaded() function, so hold that reference var oEditor = window.parent.InnerDialogLoaded(); and call it when needed: oEditor.FCK

I think that this covers all the possible situations, and I hope that I didn't overlook anything


Dmitriy Nagirnyak said...

Thanks for the useful info.

Anonymous said...

Thank you!

Unfortunately, I still cannot get jQuery to work in a plugin because I cannot access FCKEditor from anonymous callback functions!

Could you help with a quick tutorial on how to do that?

Alfonso said...

Sorry, I don't use jQuery.

You should check the FCKeditor forums as other people might have asked related questions.