Preview Window Plugin

Page contents

• Introduction
• Plugin Installation Instructions
• Configurations
  • Use a different preview template
  • Disable this plugin
• Plugin Info

TWiki real time preview for raw text editing

Introduction

PreviewWindowPlugin is a try of enhancing the current TWiki topic editing user experience. It allows the user to preview the content they are editing in real time. Even though WYSIWYG editing by TinyMCEPlugin does decent WYSIWYG, WYSIWYG edit page cannot be true WYSIWYG with TWiki variables and plug-ins -- %TOC%, <ploticus>.</ploticus> (PloticusPlugin), <dot>.</dot> (DirectedGraphPlugin), etc. cannot be displayed on the WYSIWYG edit page in the same manner as on the view page. This plug-in shows a true preview on a pop-up window so editing will not be interrupted.

Plugin Installation Instructions

Note: You do not need to install anything on the browser to use this plugin. The following instructions are for the administrator who installs the plugin on the TWiki server.

• For an automated installation, run the configure script and follow "Find More Extensions" in the in the Extensions section.

• Or follow these manual installation steps:
  • Download the ZIP file from the Plugins home (see below).
  • Unzip PreviewWindowPlugin.zip in your twiki installation directory. Content:

    File:	Description:
    data/TWiki/PreviewWindowPlugin.txt	Plugin topic
    lib/TWiki/Plugins/PreviewWindowPlugin.pm	Plugin Perl module
    lib/TWiki/Plugins/PreviewWindowPlugin/Config.spec	Plugin config spec
    pub/TWiki/PreviewWindowPlugin/RelaTimePreview.js	JavaScript code
    templates/view.previewwindow.tmpl	The default preview template

  • Set the ownership of the extracted directories and files to the webserver user.

Configurations

Use a different preview template

By default the plugin uses the default preview template for real time preview, but if you have your own settings on your instance, you can change the following params in the Config.spec file like the one we are using in Morgan Stanley:

$TWiki::cfg{Plugins}{PreviewWindowPlugin}{ViewParams} = "template=view.msstdbare.tmpl";
$TWiki::cfg{Plugins}{PreviewWindowPlugin}{DomSelector} = ".msstdTopic";

The first param represents the query string appended to the view script when you are opening the preview window, setting it to a different value can give you different preview UI. But this may generate a completely different DOM structure, that's why you have the second parameter, which is a jQuery selector for locating where the root of the content DOM tree is. For example, in pattern skin, this DOM element is the one with the class property set patternContent. Using Chrome's F12 tool usually helps, but If you still don't know which DIV element wraps your actual topic content, ask the template designer for help.

You can also change these by specifying preference variables like

   * Set PREVIEWWINDOWPLUGIN_VIEWPARAMS = template=view.msstdbare.tmpl
   * Set PREVIEWWINDOWPLUGIN_DOMSELECTOR = .msstdTopic

If preferences are specified, the configurations in Config.spec will be ignored.

Disable this plugin

To disable it, just put the following line into your WebPreferences topic

   * Set PREVIEWWINDOWPLUGIN_DISABLE = 1

Setting it to 0 or delete it will re-enable the PreviewWindowPlugin.

Plugin Info

• Set SHORTDESCRIPTION = TWiki real time preview for raw text editing

Plugin Author:	TWiki:Main.JiahaoWang
Copyright:	© 2001-2013, TWiki:TWiki.TWikiContributor
License:	GPL (GNU General Public License)
Plugin Version:	2013-02-16
TWiki Dependency:	$TWiki::Plugins::VERSION 1.4
Dependencies:	No dependencies
Plugin Benchmark:	GoodStyle 99%, FormattedSearch 99%, PreviewWindowPlugin 99%
Plugin Home:	http://TWiki.org/cgi-bin/view/Plugins/PreviewWindowPlugin
Feedback:	http://TWiki.org/cgi-bin/view/Plugins/PreviewWindowPluginDev
Appraisal:	http://TWiki.org/cgi-bin/view/Plugins/PreviewWindowPluginAppraisal

Related Topics: TWikiPlugins, DeveloperDocumentationCategory, AdminDocumentationCategory, TWikiPreferences