#9 Preview Page Functionality

closed
Editor (144)
5
2004-05-09
2004-04-15
Ben Ramsey
No

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" ;

Discussion

  • Ben Ramsey

    Ben Ramsey - 2004-04-15

    Page Preview Toolbar Button

     
  • Markus Einfinger

    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

     
  • Ben Ramsey

    Ben Ramsey - 2004-04-15

    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.

     
  • Nobody/Anonymous

    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

     
  • Ben Ramsey

    Ben Ramsey - 2004-04-15

    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".

     
  • Abdul-Aziz Al-Oraij (pk Top Man)

    Logged In: YES
    user_id=337120

    Works for me just fine...

    Thanx
    Abdulaziz

     
  • Nobody/Anonymous

    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

     
  • Frederico Caldeira Knabben

    • assigned_to: nobody --> fredck
    • status: open --> closed
     
  • Frederico Caldeira Knabben

    Logged In: YES
    user_id=572424

    Version 1.6 brings this feature.

    Best regards,
    FredCK

     
  • Nobody/Anonymous

    Logged In: NO

    wre5wewert

     

Log in to post a comment.

Get latest updates about Open Source Projects, Conferences and News.

Sign up for the SourceForge newsletter:





No, thanks