#49 serverPreview: process the preview at the server

[Alfonso Martinez]

This simple plugin allows to use a server page (in any
language that you might use) to get the current data
from the editor and preprocess before showing it
(allowing for example to include header and footer, or
replace special items created with the placeholder
plugin or similar with the values that will be shown
later in the real web).

This plugin was developed for Digital Impact

* How to Use:
*
* Add the plugin in your fckconfig.js like other plugins:
* FCKConfig.Plugins.Add( 'serverPreview' ) ;
*
* Change here the theForm.action =
FCKPlugins.Items['serverPreview'].Path + 'preview.asp' ;
* to suit your needs if it will always use the same url,
* or you can override this setting with a
FCKConfig.ServerPreviewPath variable
*
* Add a 'serverPreview' button to your toolbar instead
of the normal 'Preview'
*
* Put your magic in the preview.asp (or whatever you
set the action of the form)

[Robert Lane]

Logged In: YES
user_id=395378

This has been very helpful, as my client wanted a preview
that used al of the correct styles, navigation, etc. and
this allows me to do exactly that.

However, as written, it does not work correctly under
Firefox. I had to make one minor change. I changed line 65
to read:

document.body.appendChild( theForm );

instead of:

document.appendChild( theForm );

[Alfonso Martinez]

Logged In: YES
user_id=1356422

You're right.
I've uploaded a fixed plugin.

[John Venable]

Logged In: YES
user_id=549742
Originator: NO

I have one additional form field I'd like to include on the preview page. How do I include it in the code?

thanks

[Alfonso Martinez]

Logged In: YES
user_id=1356422
Originator: YES

You can pass additional fields in the url of the page or create them in the plugin just like the input with the data is created:

//set the new content
var input = document.createElement('INPUT') ;
input.type = 'hidden';
//change the name as needed -->
input.name = 'htmlData' ;
//set the data
input.value = FCK.GetXHTML() ;
//append the new input to the form
theForm.appendChild( input );

//that's all, append additional fields as needed, or set the variables in the previewPath

[jes-07]

Logged In: YES
user_id=1724515
Originator: NO

Hi,

I know you have already answered this...but I'm confused. I want to pass another form field to the server preview, but I don't know how to get the value. Where it says input.value = FCK.GetXHTML(), what do you need to put to get the value of another field?

Sorry if this is horribly easy and a waste of your time.....

Thanks

[Alfonso Martinez]

Logged In: YES
user_id=1356422
Originator: YES

you can use for example just this:
FCKConfig.ServerPreviewPath = 'mypreview.php?parameter=hello' ;

If you want to do it with javascript then you need to read the value that you want (it depends on your page and what do you want to do with them) and create the new items.

It's not the same reading the value of a textbox that a set of radio checkboxes or a select combo, but you should be able to find that info in any javascript tutorial.

[osinho]

Logged In: YES
user_id=1856099
Originator: NO

Hey Alfonso,

I'm really sorry to bother u again with that kinda stuff, but i'm going crazy about this.

Just as the folks posted before i would like to implement another input field in the preview. I tried everything u posted here, but i'm just not experienced enough, i guess. maybe u can explain it to me once more as i am some sort of newbie...that would help me really much, thank so much for ur help in advance..

here is what i have:
<form name="nachricht" method="post" action="">
<input name="head" id="head" value="<?php print $head;?>">
<br>
<br>
<script type="text/javascript">
<!--
var oFCKeditor = new FCKeditor( 'msg' ) ;
oFCKeditor.BasePath = '../fckeditor/' ;
oFCKeditor.Height = 300 ;
oFCKeditor.Width = 495 ;
oFCKeditor.Value = '<?php print str_replace("\r","", str_replace("\n","", str_replace("'","\'", $body)));?>' ;
oFCKeditor.Create() ;
//-->
</script>
</form>

I would like to implement the "head" input field into the preview.

Thank u so much again!

Best Regards
Osinho

[jes-07]

Logged In: YES
user_id=1724515
Originator: NO

Hey,

I managed to add an extra field called "heading" by doing this after the part where the content of the editor is set in the fckplugin.js file.

var heading = document.createElement('INPUT');
heading.type = 'hidden';
heading.name = 'heading';
heading.value = window.parent.editor.heading.value;
theForm.appendChild( heading );

Hope it helps

~Jes

[osinho]

Logged In: YES
user_id=1856099
Originator: NO

Hi,

I tried to built that in. Unfortunately after that the Preview Button wouldnt even trigger the new window..

Any Ideas?

[jes-07]

Logged In: YES
user_id=1724515
Originator: NO

So it was working before you tried to add the extra field? What does the code look like that's calling it?

[Alfonso Martinez]

Logged In: YES
user_id=1356422
Originator: YES

The problem can be that you haven't changed the form name from the example provided by jes-07, and just looking at the javascript console should be enough to find out the problem.

Another way to access the form would be to call GetParentForm()

[osinho]

Logged In: YES
user_id=1856099
Originator: NO

Hi,
well i changed the form name into mine...
this is my code
(the form name is massage and the inout field's name is head)

var heading = document.createElement('INPUT');
heading.type = 'hidden';
heading.name = head;
heading.value = window.parent.massage.head.value;
theForm.appendChild( heading );

Isnt that correct?

[Alfonso Martinez]

Logged In: YES
user_id=1356422
Originator: YES

no, the name of your form is nachricht according to the code that you posted earlier.

and you must quote the value for the name attribute:
heading.name = 'head';

[Edgar Henry Caballero Rúa]

Logged In: YES
user_id=2047875
Originator: NO

¿How can i config the preview page in ASP.net 2.0?

[webber]

Logged In: YES
user_id=1145087
Originator: NO

Hello.

How to configure it for PHP?

Thanks.

[webber]

Logged In: YES
user_id=1145087
Originator: NO

Hello again.

I should have elaborated about what I'm trying to do.

I'd like to take that variable to use upon 'Submit' or 'Save' and therefore use in the editor's form action page.

How would I grab that variable for PHP in this case? I assume I would put that page name in the 'theForm.action' and if so, what else needs to be done?

Thanks.

[Alfonso Martinez]

new version compatible with latest FCKeditor

[Alfonso Martinez]

Logged In: YES
user_id=1356422
Originator: YES

This new version does support correctly FCKeditor 2.5 and newer, it doesn't even need to change the default 'Preview' button from your toolbar, it reuses that command.

Other explanations are available in
http://alfonsoml.blogspot.com/2008/05/serverpreview-plugin-for-fckeditor-25.html
File Added: serverPreview0.2.zip