2008/05/16

ServerPreview plugin for FCKeditor 2.5+

Yes, a little too late, but better late than never.

Finally, here is the updated version of the ServerPreview plugin.

As mentioned in the original release, this is a very simple plugin, and the new version is even simpler. I've removed the need to add a new button and the plugin just replaces the original preview command, so the only thing that you need to make it work is:

  1. Extract the plugin to your plugins folder
  2. Like the rest of plugins, add it to your instance: FCKConfig.Plugins.Add( 'serverPreview' ) ;
  3. Set the url of the page that will receive the data: FCKConfig.ServerPreviewPath

Then you just put all the server code that you want in that page, and read the data that is sent in the 'htmlData' field. You can change the plugin to add more fields if you need to. It could be possible to write a generic code to send all the current fields to the server, but I've never found enough time to write it (it just took me 6 months to write this post)

You can see a demo at the Google maps demo (due to the use of document.write the normal preview fails, so this plugin is really useful for that situation)

I haven't write a specific demo page for this plugin or other detailed installation instructions, so just go to SourceForge and get it.

5 comments:

fleeps said...

Thanks for the script. It is exactly what I was looking for.
Just one question. If I wanted to have no menu, scroll bar, etc for the preview window, do I configure it in your plugin js file or in the Fckeditor files?

Alfonso said...

IIRC the preview is launched by creating a form with target="_blank", that doesn't allow to specify which features you want in the new window.

And a popup with scrollbars disabled is evil.

fleeps said...

Well, evil is my middle name (Scroll Bar is my girl friends name)
:p
Thanks

amuse said...

I'm also looking a way to open ServerPreview in a new popup, but I could't figure out how to modify line: theForm.target='_blank';.

Can you help me to open popup with specified width and height?

Thanks, amuse

Alfonso said...

There's nothing special there, it's just a simple form, so you can use whatever technique that you want.

Test with a simple html page, and when you get the exact behavior that you want then you add it to the plugin code.

Anyway, I must add an important warning: this plugin can be a source of XSS if you aren't careful and anyone can use the server page that it's used to render the preview. The example is just dumping whatever html is sent to it, so it would be extremely easy for an attacker to create a big problem if you are using this plugin (or anything similar) and you don't add proper security measures around this.