The XHTML WYSIWYG Editor For Desktop & Web Applications

Browser Preview Customization

XStandard is a content editor, therefore content authors use the editor to edit portions of a Web page, not the entire page. Some authors find it useful however to preview the content they produce within the layout of the actual Web page. You can add this feature by modifying the XSLT in preview.xsl, in order to customize the Browser Preview mode.

To instruct the Browser Preview feature to use a different CSS file, add the following XSLT rule to preview.xsl:

  1. <xsl:template match="style">
  2. <style type="text/css" media="screen">@import url('http://myserver/format.css');</style>
  3. </xsl:template>

Layout markup can be added to preview.xsl in the following way:

  1. <xsl:template match="body">
  2. <body>
  3. <h1><img alt="Welcome To My Site" src="images/logo.gif" /></h1>
  4. <ul id="nav">
  5. <li><a href="#" onclick="return false;">Home</a></li>
  6. <li><a href="#" onclick="return false;">Products</a></li>
  7. <li><a href="#" onclick="return false;">Services</a></li>
  8. <li><a href="#" onclick="return false;">News</a></li>
  9. <li><a href="#" onclick="return false;">About Us</a></li>
  10. </ul>
  11. <div id="content">
  12. <xsl:apply-templates />
  13. </div>
  14. </body>
  15. </xsl:template>

Content generated through the editor will be inserted into the page layout markup at the location <xsl:apply-templates />.

To instruct the editor to use the customized Browser Peview file, give the location of the file in the <param> tag named PreviewXSLT. For example:

  1. <param name="PreviewXSLT" value="http://myserver/preview.xsl" />