TWiki/WysiwygPlugin.mdwn

   1 # <a name="Wysiwyg Plugin"></a><a name=" Wysiwyg Plugin"></a> Wysiwyg Plugin
   2
   3 %SHORTDESCRIPTION%
   4
   5 Support for the integration of WYSIWYG (What-You-See-Is-What-You-Get) editors. On its own, the only thing this plugin gives you is a stand-alone HTML to TWiki translator script. For WYSIWYG editing in TWiki, you will also need to install a specific editor package such as TWiki:Plugins.KupuEditorContrib or TWiki:Plugins.WikiwygContrib.
   6
   7 This plugin provides a generic framework that supports editing of TWiki topics using any browser-based HTML editor. It works by transforming TML (TWiki Meta Language) into HTML for the editor, and then transforming HTML back into TML on save.
   8
   9 <div>
  10   <ul>
  11     <li><a href="#Features"> Features</a></li>
  12     <li><a href="#Details"> Details</a><ul>
  13         <li><a href="#What's in the package"> What's in the package</a></li>
  14         <li><a href="#How it works"> How it works</a></li>
  15         <li><a href="#Using the translators from Perl"> Using the translators from Perl scripts</a></li>
  16         <li><a href="#Integrating a HTML Editor"> Integrating a HTML Editor</a><ul>
  17             <li><a href="#Generating content directly in t"> Generating content directly in the standard edit template</a></li>
  18             <li><a href="#Generating content directly in a"> Generating content directly in a specialised edit template</a></li>
  19             <li><a href="#Fetching content from a URL"> Fetching content from a URL</a></li>
  20           </ul>
  21         </li>
  22         <li><a href="#Other techniques"> Other techniques</a><ul>
  23             <li><a href="#Asynchronous saves"> Asynchronous saves</a></li>
  24             <li><a href="#Handling Attachments"> Handling Attachments</a></li>
  25             <li><a href="#REST handlers"> REST handlers</a></li>
  26           </ul>
  27         </li>
  28       </ul>
  29     </li>
  30     <li><a href="#Plugin Installation Instructions"> Plugin Installation Instructions</a></li>
  31     <li><a href="#Plugin Configuration Settings"> Plugin Configuration Settings</a><ul>
  32         <li><a href="#Translator control"> Translator control</a></li>
  33       </ul>
  34     </li>
  35     <li><a href="#Known issues"> Known issues</a><ul>
  36         <li><a href="#Incompatible with "non-standard""> Incompatible with "non-standard" syntax</a></li>
  37         <li><a href="#Overlapping styles"> Overlapping styles</a></li>
  38       </ul>
  39     </li>
  40     <li><a href="#Plugin Info"> Plugin Info</a></li>
  41   </ul>
  42 </div>
  43
  44 ## <a name="Features"></a> Features
  45
  46 - Supports the input of malformed HTML
  47 - Full round-trip (TML -&gt; XHTML -&gt; TWiki syntax)
  48 - Framework is editor-agnostic
  49
  50 ## <a name="Details"></a> Details
  51
  52 ### <a name="What&#39;s in the package"></a> What's in the package
  53
  54 The package includes the following pieces:
  55
  56 - TML (TWiki syntax) to HTML translator
  57 - HTML to TML translator (with stand-alone script)
  58 - Generic TWiki plugin for automating the translation during editing
  59
  60 ### <a name="How it works"></a> How it works
  61
  62 The plugin works by translating the topic text into HTML when someone edits a topic. The HTML is then fed to the WYSIWYG editor. On save, the edited HTML is run through the reverse translation before saving to the topic. TWiki syntax is used in preference to HTML in the stored topic wherever possible, though HTML may be used if the translator can't find a suitable TML equivalent..
  63
  64 The default rendering that TWiki uses to generate HTML for display in browsers is 'lossy' - information in the TWiki syntax is lost in the HTML output, and a round-trip (recovering the original TWiki syntax from the HTML) is impossible. To solve this problem the plugin instead uses its own translation of TWiki syntax to XHTML. The generated XHTML is annotated with CSS classes that support the accurate recovery of the original TWiki syntax.
  65
  66 _Before you ask the obvious question, yes, the translator **could** be used to replace the TWiki rendering pipeline for generating HTML pages. In fact, the translator is taken almost directly from the implementation of the rendering pipeline for the TWiki-4 release_
  67
  68 Translation of the HTML back to TWiki syntax uses the CPAN:HTML::Parser. This parser is used in preference to a more modern XML parser, because the WYSIWYG editor may not generate fully compliant XHTML. A strict parser would risk losing content. CPAN:HTML::Parser is better at handling malformed HTML.
  69
  70 There is also the advantage that the translator can be used to **import** HTML from other sources - for example, existing web pages. Due to the simple nature of TWiki syntax and the potential complexity of web pages, this translation is often lossy - i.e there will be HTML features that can be entered by editors that will be lost in this translation step. This is especially noticeable with HTML tables.
  71
  72 ### <a name="Using the translators from Perl"></a><a name="Using the translators from Perl "></a> Using the translators from Perl scripts
  73
  74 Both translators can be used directly from Perl scripts, for example to build your own stand-alone translators.
  75
  76 A stand-alone convertor script for HTML to TWiki is included in the installation. It can be found in `tools/html2tml.pl`.
  77
  78 ### <a name="Integrating a HTML Editor"></a> Integrating a HTML Editor
  79
  80 The plugin can be used to integrate an HTML editor in a number of different ways.
  81
  82 1. The HTML for the content-to-be-edited can be generated directly in the standard edit template.
  83 2. The HTML for the content-to-be-edited can be generated directly in a specialised edit template.
  84 3. A URL can be used to fetch the content-to-be-edited from the server, for use in an IFRAME.
  85 4. REST handlers can be called from Javascript to convert content.
  86
  87 #### <a name="Generating content directly in t"></a> Generating content directly in the standard edit template
  88
  89 This is the technique used by WYSIWYG editors that can sit on top of HTML textareas, such as TinyMCE. The topic content is pre-converted to HTML before inclusion in the standard edit template. These editors use plugins that have a `beforeEditHandler` and an `afterEditHandler`. These handlers are responsible for the conversion of topic text to HTML, and post-conversion of HTML back to TML.
  90
  91 1. User hits "edit".
  92 2. Editor-specific plugin `beforeEditHandler` converts topic content to HTML by calling `TWiki::Plugins::WysiwygPlugin::TranslateTML2HTML`.
  93 3. User edits and saves
  94 4. Editor-specific plugin `afterEditHandler` converts HTML back to TML by calling `TWiki::Plugins::WysiwygPlugin::TranslateHTML2TML`.
  95
  96 - WysiwygPlugin should **not** be enabled in `configure`.
  97 - `WYSIWYGPLUGIN_WYSIWYGSKIN` should **not** be set.
  98 - Your plugin should set the `textareas_hijacked` context id, to signal to skins to suppress their textarea manipulation functions.
  99
 100 This is the recommended integration technique, if your editor can support it.
 101
 102 #### <a name="Generating content directly in a"></a> Generating content directly in a specialised edit template
 103
 104 This technique is useful when the editor requires the topic content in a variety of different formats at the same time. In this scenario the editor uses a custom edit template. The WYSIWYG content is made available for instantiation in that template in a number of different formats. `WYSIWYGPLUGIN_WYSIWYGSKIN` **must** be set for this to work.
 105
 106 The flow of control is as follows:
 107
 108 1. User hits "edit" with the skin (or cover) set the same as `WYSIWYGPLUGIN_WYSIWYGSKIN`.
 109 2. The WysiwygPlugin `beforeEditHandler` determines if the topic is WYSIWYG editable, and vetos the edit if not by redirecting to the standard edit skin. the edit
 110 3. The `edit` template containing the JS editor is instantiated.
 111 4. The following variables are available for expansion in the template:
 112   - `%WYSIWYG_TEXT%` expands to the HTML of the content-to-be-edited. This is suitable for use in a `textarea`.
 113   - `%JAVASCRIPT_TEXT%` expands to the HTML of the content-to-be-edited in a javascript constant.
 114 5. User edits and saves
 115 6. The `afterEditHandler` in the WyswiygPlugin sees that `wysiwyg_edit` is set, which triggers the conversion back to TML.
 116
 117 - The HTML form in the edit template **must** include an `<input` called `wysiwyg_edit` and set it to 1, to trigger the conversion from HTML back to TML.
 118 - `WYSIWYGPLUGIN_WYSIWYGSKIN` must be set to the name of the skin used for WYSIWYG editing. This is usually the name of the editor e.g. `kupu`.
 119
 120 #### <a name="Fetching content from a URL"></a> Fetching content from a URL
 121
 122 In this scenario, the edit template is generated **without** the content-to-be-edited. The content is retrieved from the server using a URL e.g. from an `IFRAME`.
 123
 124 The flow of control is as follows:
 125
 126 1. As _Generating content directly in a specialised edit template_
 127 2. As _Generating content directly in a specialised edit template_
 128 3. As _Generating content directly in a specialised edit template_
 129 4. When the document loads in the browser, the JS editor invokes a content URL (using an `IFRAME` or a `XmlHttpRequest`) to obtain the HTML document to be edited
 130   - The content URL is just a TWiki `view` URL with the `wysiwyg_edit` parameter set.
 131   - The WysiwygPlugin recognises the `wysiwyg_edit` parameter and uses the [[TML2HTML]] translator to prepare the text, which is then returned as `text/plain` to the browser.
 132   - Two TWiki variables, `%OWEB%` and %OTOPIC%=, can be used in the content URL in the edit template to refer to the source topic for the content.
 133 5. After edit handling is as for _Generating content directly in a specialised edit template_
 134
 135 ### <a name="Other techniques"></a> Other techniques
 136
 137 #### <a name="Asynchronous saves"></a> Asynchronous saves
 138
 139 Editors can use `XmlHttpRequest` to perform saves, by POSTing to the TWiki `save` script with the `wysiwyg_edit` parameter set to `1`. This parameter tells the `beforeSaveHandler` in the WysiwygPlugin to convert the content back to TML. See [[TWikiScripts]] for details of the other parameters to the `save` script.
 140
 141 Once the save script has completed it responds with a redirect, either to an Oops page if the save failed, or to the appropriate post-save URL (usually a `view`). The editor must be ready to handle this redirect.
 142
 143 #### <a name="Handling Attachments"></a> Handling Attachments
 144
 145 Attachment uploads can be handled by URL requests from the editor template to the TWiki `upload` script. The `upload` script normally redirects to the containing topic; a behaviour that you usually don't want in an editor! There are two ways to handle this:
 146
 147 - If the uploads are done in an `IFRAME` or via `XmlHttpRequest`, then the 302 redirect at the end of the upload can simply be ignored.
 148 - You can pass `noredirect` to the `upload` script to suppress the redirect. In this case you will get a `text/plain` response of `OK` followed by a message if everything went well, or an error message if it did not.
 149
 150 #### <a name="REST handlers"></a> REST handlers
 151
 152 If you are confident in Javascript you can use REST handlers with `XmlHttpRequest` to convert content from TML to HTML and back again.
 153
 154 The plugin defines the following REST handlers:
 155
 156 `.../rest/WysiwygPlugin/html2tml?topic=Web.Topic;text=htmltexttotranslate`
 157
 158 Converts the HTML text to TML. `topic` **must** be specified.
 159
 160 `.../rest/WysiwygPlugin/tml2html?topic=Web.Topic;text=tmltexttotranslate`
 161
 162 Converts the TML text to HTML. `topic` **must** be specified. The response is a `text/plain` page of converted content.
 163
 164 ## <a name="Plugin Installation Instructions"></a> Plugin Installation Instructions
 165
 166 You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server where TWiki is running.
 167
 168 Like many other TWiki extensions, this module is shipped with a fully automatic installer script written using the BuildContrib.
 169
 170 - If you have TWiki 4.2 or later, you can install from the `configure` interface (Go to Plugins-&gt;Find More Extensions)
 171   - See the [installation supplement](http://twiki.org/cgi-bin/view/Plugins/BuildContribInstallationSupplement) on TWiki.org for more information.
 172 - If you have any problems, then you can still install manually from the command-line:
 173   1. Download one of the `.zip` or `.tgz` archives
 174   2. Unpack the archive in the root directory of your TWiki installation.
 175   3. Run the installer script ( `perl <module>_installer` )
 176   4. Run `configure` and enable the module, if it is a plugin.
 177   5. Repeat for any missing dependencies.
 178 - If you are **still** having problems, then instead of running the installer script:
 179   1. Make sure that the file permissions allow the webserver user to access all files.
 180   2. Check in any installed files that have existing `,v` files in your existing install (take care **not** to lock the files when you check in)
 181   3. Manually edit LocalSite.cfg to set any configuration variables.
 182
 183 <div class="twikiAlert">%X% WARNING: SYSTEMWEB is not defined in this TWiki. Please add these definitions to your [[Main/TWikiPreferences]], if they are not already there:<br /><pre>   * Set SYSTEMWEB = %TWIKIWEB%<br />   * Set USERSWEB = %MAINWEB%</pre></div>
 184
 185 ## <a name="Plugin Configuration Settings"></a> Plugin Configuration Settings
 186
 187 ### <a name="Translator control"></a> Translator control
 188
 189 **Implementors note** if you are using your own before/after edit handlers, you can call `TWiki::Plugins::WysiwygPlugin::isWysiwygEditable()` to check these controls.
 190
 191 ## <a name="Known issues"></a> Known issues
 192
 193 ### <a name="Incompatible with &quot;non-standard&quot;"></a> Incompatible with "non-standard" syntax
 194
 195 [[WysiwygPlugin]] is incompatible with plugins that expand non-standard syntax e.g. TWiki:Plugins.MathModePlugin ([[WysiwygPlugin]])
 196
 197 Plugins that extend the syntax using TWiki variables, such as `%MYVARIABLE%`, should work fine.
 198
 199 ### <a name="Overlapping styles"></a> Overlapping styles
 200
 201 Because TWiki uses a "best guess" approach to some formatting, it allows overlapping of tags in a way forbidden by HTML, and it is impossible to guarantee 100% that formating in the original TWiki document will still be there when the same document is loaded and then saved through the [[WysiwygPlugin]]. The most obvious case of this is to do with styles. For example, the sentence
 202
 203     *bold _bold-italic* italic_
 204
 205 is legal in TML, but in HTML is represented by
 206
 207     <strong>bold <em>bold-italic</em></strong> <em>italic</em>
 208
 209 which gets translated back to TML as
 210
 211     *bold _bold-italic_* _italic_
 212
 213 which is correct by construction, but does not render correctly in TWiki. This problem is unfortunately unavoidable due to the way TWiki syntax works.
 214
 215 ## <a name="Plugin Info"></a> Plugin Info
 216
 217 This plugin is brought to you by a [WikiRing [![](http://www.dementia.org/twiki//view/wikiringlogo20x20.png "WikiRing: Professional Wiki Innovation and Support")](http://wikiring.com)](http://wikiring.com) partner - working together to improve your wiki experience!
 218
 219 Many thanks to the following sponsors for supporting this work:
 220
 221 - [ILOG](http://ilog.fr)
 222 - [Carrier Corporation](http://www.carrier.com)
 223 - [TWIKI.NET](http://twiki.net)
 224
 225 <table border="1" cellpadding="0" cellspacing="0">
 226   <tr>
 227     <td align="right"> Plugin Author(s): </td>
 228     <td> TWiki:Main.CrawfordCurrie <a href="http://www.c-dot.co.uk" target="_top">http://www.c-dot.co.uk</a></td>
 229   </tr>
 230   <tr>
 231     <td align="right"> Copyright </td>
 232     <td> © ILOG 2005 <a href="http://www.ilog.fr" target="_top">http://www.ilog.fr</a></td>
 233   </tr>
 234   <tr>
 235     <td align="right"> License </td>
 236     <td><a href="http://www.gnu.org/licenses/gpl.html" target="_top">GPL (Gnu General Public License)</a></td>
 237   </tr>
 238   <tr>
 239     <td align="right"> Plugin Version: </td>
 240     <td> 17829 (30 Mar 2009) </td>
 241   </tr>
 242   <tr>
 243     <td align="right"> Change History: </td>
 244     <td>   </td>
 245   </tr>
 246   <tr>
 247     <td align="right"> 22 Oct 2008 </td>
 248     <td> Fixed TWikibug:Item5961 (emphasis), TWikibug:Item6089 (backslash in verbatim) </td>
 249   </tr>
 250   <tr>
 251     <td align="right"> 7 Aug 2008 </td>
 252     <td> Fixed TWikibug:Item5707 (mod_perl) </td>
 253   </tr>
 254   <tr>
 255     <td align="right"> 3 Aug 2008 </td>
 256     <td> TWiki 4.2.1 release version </td>
 257   </tr>
 258   <tr>
 259     <td align="right"> 25 May 2008 </td>
 260     <td> TWikibug:Item5457: TWikibug:Item5528: TWikibug:Item5626: using a debug simulation, I believe I have finally fixed all the complexities of using international character sets with the translator. </td>
 261   </tr>
 262   <tr>
 263     <td align="right"> 13 Apr 2008 </td>
 264     <td> TWikibug:Item4946: TWikibug:Item5530: I think I have finally fixed non-iso-8859-1 character sets. Painful. TWikibug:Item5393: removed spurious DIV generated by IE inside LI tags </td>
 265   </tr>
 266   <tr>
 267     <td align="right"> 31 Mar 2008 </td>
 268     <td> TWikibug:Item5314: TWikibug:Item5457: Fixed pickaxe mode for editing UTF-8. Characters above 255 are converted to entitites, which is a bit of a PITA, but at least it no longer corrupts topics. </td>
 269   </tr>
 270   <tr>
 271     <td align="right"> 28 Mar 2008 </td>
 272     <td> TWikibug:Item5294: fixed angle brackets in plain text and promoted sticky to be higher priority than any other tag, solving several problems in one go </td>
 273   </tr>
 274   <tr>
 275     <td align="right"> 24 Jan 2008 </td>
 276     <td> TWikibug:Item5257: remove extra spaces at end of Set lines </td>
 277   </tr>
 278   <tr>
 279     <td align="right"> 20 Dec 2007 </td>
 280     <td> TWikibug:Item5022: made TT font size same as verbatim. Had to add a new style to do it, as TMCE didn't want to play with TT or CODE tags. TWikibug:Item5138: post-conversion of 8-bit entities to characters to aid searching etc. </td>
 281   </tr>
 282   <tr>
 283     <td> 19 Dec 2007 </td>
 284     <td> TWikibug:Item4836: make the parser tolerant of META, so pasting OO docs works TWikibug:Item4969: autoclose BR and HR tags TWikibug:Item5132: fixed IMG tags TWikibug:Item5076: fixed line-sensitive TML embedded in tables </td>
 285   </tr>
 286   <tr>
 287     <td align="right"> 8 Nov 2007 </td>
 288     <td> TWikibug:Item4923: fixed blocking of table conversion due to empty attributes TWikibug:Item4936: An em embedded in an em was getting eaten TWikibug:Item4817: added typewriter text button TWikibug:Item4850: added font colour controls TWikibug:Item4645: added REST handlers for upload and fetching lists of attachments </td>
 289   </tr>
 290   <tr>
 291     <td align="right"> 2 Nov 2007 </td>
 292     <td> TWikibug:Item4903: corrected over-enthusiastive interpretation of ! as an escape </td>
 293   </tr>
 294   <tr>
 295     <td align="right"> 21 Oct 2007 </td>
 296     <td> TWikibug:Item4788: fixed unbalanced protect, which could cause loss of protected status TWikibug:Item4811: noautolink <strong>looks</strong> like an HTML construct but in fact is not; the tag is infact an "on-off" switch and does not imply any HTML structure, so cannot be converted to a DIV or a span, so has to be removed. TWikibug:Item4747: added &lt;sticky&gt; to try to overcome limitations in translation TWikibug:Item4831: added increased flexibility in deciding what HTML get converted to TML, and what does not. Analysed all the HTML4 tags to establish initial settings. TWikibug:Item4847: don't call non-existent function with older HTML::Parser releases TWikibug:Item4844: Saving a table from IE didn't convert it back to TML TWikibug:Item4855: table rows generated from TWiki variables were being eaten </td>
 297   </tr>
 298   <tr>
 299     <td align="right"> 6 Oct 2007 </td>
 300     <td> TWikibug:Item4700: fixed colspans TWikibug:Item4701: removed extra line between %TABLE and the table TWikibug:Item4705: fixed spacing around literal and verbatim blocks TWikibug:Item4706: merge adjacent verbatim blocks separated only by whitespace TWikibug:Item4712: fixed eating of noautolink and literal TWikibug:Item4763: list items spanning multiple lines fixed TWikibug:Item4867: released tml2html </td>
 301   </tr>
 302   <tr>
 303     <td align="right"> 17 Sep 2007 </td>
 304     <td> TWikibug:Item4647: TWikibug:Item4652: problems related to DIV fixed. TWikibug:Item4653: fixed multi-line twiki variables </td>
 305   </tr>
 306   <tr>
 307     <td align="right"> 16 Sep 2007 </td>
 308     <td> TWikibug:Item4630: polished up the way the secret string is done, to ensure synch between perl and JS. Item4622: added UTF-8 handling steps that fixup malformed UTF8 strings before presenting them to the editor (saves Moz) and stops the editor passing them back to TWiki (saves IE). Removed extra entity decoding steps that were causing problems. TWikibug:Item4629: fixed issues with verbatim, highlighted by previous mangling of this topic </td>
 309   </tr>
 310   <tr>
 311     <td align="right"> 13 Sep 2007 </td>
 312     <td> TWikibug:Item4613 cleaned up spurious message when navigating away TWikibug:Item4615 fixed incorrect rendering of emphasis next to br </td>
 313   </tr>
 314   <tr>
 315     <td align="right"> 12 Sep 2007 </td>
 316     <td> TWikibug:Item4604 Fixes to REST handler, and add ability to trigger [[Main/HTML2TML]] conversion from a content comment alone (required for some editors) TWikibug:Item4588 fixes to conversion of double-character emphases </td>
 317   </tr>
 318   <tr>
 319     <td align="right"> 7 Sep 2007 </td>
 320     <td> TWikibug:Item4503 excess empty lines TWikibug:Item4486 no toc headers with unofficial syntax TWikibug:Item4560: empty lines lost TWikibug:Item4566: corrupted table on save TWikibug:Item4550 section tags being eaten </td>
 321   </tr>
 322   <tr>
 323     <td align="right"> 4 Sep 2007 </td>
 324     <td> TWikibug:Item4534 TWikibug:Item4535 fixed </td>
 325   </tr>
 326   <tr>
 327     <td colspan="2"> See Subversion logs for earlier revisions </td>
 328   </tr>
 329   <tr>
 330     <td align="right"> Dependencies: </td>
 331     <td>
 332       <table border="1">
 333         <tr>
 334           <th>Name</th>
 335           <th>Version</th>
 336           <th>Description</th>
 337         </tr>
 338         <tr>
 339           <td align="left">HTML::Parser</td>
 340           <td align="left">&gt;=3.28</td>
 341           <td align="left">Required. Available from <a href="http://cpan.uwinnipeg.ca/search?query=HTML%3A%3AParser&mode=dist" target="_top">CPAN</a>.</td>
 342         </tr>
 343         <tr>
 344           <td align="left">HTML::Entities</td>
 345           <td align="left">&gt;=1.25</td>
 346           <td align="left">Required. Available from <a href="http://cpan.uwinnipeg.ca/search?query=HTML%3A%3AEntities&mode=dist" target="_top">CPAN</a>.</td>
 347         </tr>
 348         <tr>
 349           <td align="left">Encode</td>
 350           <td align="left">&gt;=2.01</td>
 351           <td align="left">Required.</td>
 352         </tr>
 353       </table>
 354     </td>
 355   </tr>
 356   <tr>
 357     <td align="right"> Plugin Home: </td>
 358     <td><a href="http://twiki.org/cgi-bin/view/Plugins/%TOPIC%" target="_top">http://twiki.org/cgi-bin/view/Plugins/%TOPIC%</a></td>
 359   </tr>
 360   <tr>
 361     <td align="right"> Feedback: </td>
 362     <td> TWiki:Plugins/%TOPIC%Dev </td>
 363   </tr>
 364   <tr>
 365     <td align="right"> Appraisal: </td>
 366     <td><a href="http://twiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal" target="_top">http://twiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal</a></td>
 367   </tr>
 368 </table>
 369
 370 **_Related Topics:_** [[TWikiPreferences]], [[TWikiPlugins]]