Page Preview Toolbar Button
I've added a button to my editor to allow "preview
page" functionality that launches a new browser window
with a preview of the content from the editor. I
submitted this to fredck, but I thought I would go
ahead and post it here, as well, for anyone who wanted
to go ahead and implement it:
##############################
Drop button.preview.gif into /images/toolbar/
##############################
image attached below
##############################
Add the following lines of code to /js/fck_actions.js :
##############################
function preview()
{
var preview_window;
var editor_content = objContent.DOM.body.innerHTML ;
preview_window = window.open('', '',
'toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,titlebar=1');
preview_window.document.write(editor_content);
preview_window.document.close();
preview_window.document.createStyleSheet(config.EditorAreaCSS);
}
##############################
I also added it to the context menu, though I'm not
sure it has to be there. I changed the following lines
of code in /js/fck_contextmenu.js to include the
Preview button in GeneralContextMenu[]
##############################
GeneralContextMenu[0] = new
ContextMenuItem(lang["Preview"], "preview()",
TBCMD_CUSTOM) ;
GeneralContextMenu[1] = new
ContextMenuItem(lang["Cut"], DECMD_CUT) ;
GeneralContextMenu[2] = new
ContextMenuItem(lang["Copy"], DECMD_COPY) ;
GeneralContextMenu[3] = new
ContextMenuItem(lang["Paste"], DECMD_PASTE) ;
##############################
Add the following line of code to /js/fck_toolbaritems.js
##############################
TBI.prototype.Preview = new TBButton("Preview"
, lang["Preview"] , "preview()"
, TBCMD_CUSTOM) ;
##############################
Add 'Preview' to the Default toolbar set in
/js/fck_config.js
##############################
##############################
Add the following line to /lang/en.js (and to the other
translations, as well)
##############################
lang["Preview"] = "Preview Page" ;
Page Preview Toolbar Button
Logged In: YES
user_id=749600
Great idea, I like that function!
One little thing: Images do not preview correctly with my
configuration (I have relative URLs like img/logo.gif, and the
folder "img" is located in the root directory).
Perhaps it is possible to add the config.BasePath somehow?
Obviously, the base path of the new window is the same as
the editor's location.
Thanks!
Markus
Logged In: YES
user_id=631222
I hadn't considered that, actually. Can you use absolute
paths (/img/logo.gif), rather than relative paths
(img/logo.gif)? That's our our implementation is set up.
Logged In: NO
is it perhaps possible to detect the browser version and
depending if it's IE6 load the actual native 'Print Preview'
instead of a new window?
I've submitted a feature request (<a
href="https://sourceforge.net/tracker/index.php?
func=detail&aid=935170&group_id=75348&atid=543656">Print
Preview button for IE6</a>) yesterday including some sample
code.
Please check it out.
Thanks,
Mark
Logged In: YES
user_id=631222
I suppose that's possible; however, my intentions are not to
provide a "Print Preview" of what's in the editor but a
"Page Preview," since we are not using the content of the
editor for any printing but rather for display on a Web page.
I saw your request, and I think it's definitely possible.
In fact, you could probably take what I've submitted here
and work it around a little bit, just modifying the
preview() function to get the desired result of a "Print
Preview".
Logged In: YES
user_id=337120
Works for me just fine...
Thanx
Abdulaziz
Logged In: NO
Probably the best thing to do would be to have IE6 users just
go to the page preview and choose File > Print Preview from
there. That way there is no confusion between 'Page Preview'
and 'Print Preview' as they would have quite simmilar icons
(winword2003 calls the icon you used Print Preview).
Anyway great feature and sorry for my confusion between
the two :)
keep up the good work,
Mark
Logged In: YES
user_id=572424
Version 1.6 brings this feature.
Best regards,
FredCK
Logged In: NO
wre5wewert
Log in to post a comment.