2008/02/15

Adding configuration entries when creating a FCKeditor instance

When you create a instance of FCKeditor using any of the integration methods (javascript, PHP, asp, coldfusion...) you first create an object, but that object isn't the real FCKeditor object (it might be obvious when talking about server integration methods, as FCKeditor is run as javascript in the client, not on the server. But but difference is very important when creating the object in javascript).

You can check the properties of that object in the fckeditor.* files at the root of the distribution, but basically they are:

Instance name

The name of the FCKeditor object. It will be used when the data is sent back to the server as another form element, or you can use the FCKeditorAPI.GetInstance function from the API to get the FCKeditor object and work with it from Javascript.

Width, Height

Obviously the Width and Height that will be used to create the element in the page.

Toolbarset

The toolbar that you want to use for this instance.

BasePath

The folder where the FCKeditor files are in your server. If you put a wrong value here you'll get lots of errors and nothing will work.

 

That's all. There are no more properties on the creation of the FCKeditor instance.

And you might ask "How am I supposed to configure any additional option?, Am I forced to always modify the fckconfig.js file?"

Well, I've lied a little, there's one extra property, the Config object, that's an object that allows to set pairs of propertie:value for the configuration options that you might set in the fckconfig.js file. There are some very important restrictions: you can't set here any OBJECT or ARRAY, you can set only STRINGS, NUMBERS or BOOLEAN values. But besides that restrictions, you are free to add any value here, as long as you set something that it's correct then you don't have to modify the fckconfig.js (I mean something valid, because some people write just anything here and expect it to magically work. It must be something that is allowed as a property of FCKConfig. in the fckconfig.js file

Let's do some examples with the GoogleMaps_Key value used in the GoogleMaps plugin:

In Javascript:

var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Config["GoogleMaps_Key"] = 'ABQIAAAAlXu5Pw6DFAUgqM2wQn01gxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSy5hTGQdsosYD3dz6faZHVrO-02A';
... 

In PHP:

$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->Config['GoogleMaps_Key']  = 'ABQIAAAAlXu5Pw6DFAUgqM2wQn01gxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSy5hTGQdsosYD3dz6faZHVrO-02A' ;
... 

In Asp:

Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.Config("GoogleMaps_Key") = "ABQIAAAAlXu5Pw6DFAUgqM2wQn01gxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSy5hTGQdsosYD3dz6faZHVrO-02A"
...

It's just the same for every language, you use the "creator" object, and then set in its Config object the property that you want.

 

2008/02/03

GoogleMaps in FCKeditor

A little while ago I took the task suggested by dynamical.biz to implement a plugin for FCKeditor that would allow any end user to easily create a Google Map that can be inserted in the content and so it will be shown in the final page as he wanted.

It isn't an easy task because there are several little problems, mainly the fact that any javascript code is automatically protected so it won't be available in the DOM. Also, the plugin should be able to update the existing maps because we know that while you are editing something looks mostly OK, but when you finally see all the final page maybe you wish that it could have been a little bigger, or smaller, the map should have been centered a little to the north...

But if I'm writing this post is because of course it did work, so you can test it online

The integration with any installation is quite straightforward and is clearly documented, the only special thing is that you must get a Google Maps API key, but even that step is very easy.

Go, download it and play with it. For developers its code might have very interesting surprises, I'm not saying that the code is perfect, but I think that it does open the doors to make other plugins and code that previously were thought as "too difficult" (for example handling Flash files with the SWFObject, or being able to show at least a simple textarea to edit comments of PHP code). If you read this code (sorry if there aren't enough comments or everything is a little mixed up for the moment), you might find the bits that you need. And if you find this code useful, please contribute back your own ideas, plugins or why not?, a little donation