Wysiwyg Plugin

Translator framework for WYSIWYG editors

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 TML (Topic Markup Language translator script. For WYSIWYG editing you will also need to install a specific editor package such as Foswiki:Extensions.TinyMCEPlugin.

This plugin provides a generic framework that supports editing of topics using any browser-based HTML editor. It works by transforming TML into HTML for the editor, and then transforming HTML back into TML on save.

Features

• Supports the input of malformed HTML
• Full round-trip (TML -> XHTML -> TML)
• Framework is editor-agnostic

Details

What's in the package

The package includes the following pieces:

• TML to HTML translator
• HTML to TML translator (with stand-alone script)
• Generic plugin for automating the translation during editing

How it works

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

The default rendering that Foswiki uses to generate HTML for display in browsers is 'lossy' - information in the TML is lost in the HTML output, and a round-trip (recovering the original TML from the HTML) is impossible. To solve this problem the plugin instead uses its own translation of TML to XHTML. The generated XHTML is annotated with CSS classes that support the accurate recovery of the original TML.

Before you ask the obvious question, yes, the translator could be used to replace the Foswiki 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

Translation of the HTML back to TML 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.

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

Using the translators from Perl scripts

Both translators can be used directly from Perl scripts, for example to build your own stand-alone translators.

A stand-alone convertor script for HTML to TML is included in the installation. It can be found in tools/html2tml.pl. Run it with a --help parameter to find out how to use it i.e. perl -I bin tools/html2tml.pl --help

There is also a stand-alone translator for TML to HTML, in tools/tml2html.pl.

Integrating a HTML Editor

The plugin can be used to integrate an HTML editor in a number of different ways.

1. The HTML for the content-to-be-edited can be generated directly in the standard edit template.
2. The HTML for the content-to-be-edited can be generated directly in a specialised edit template.
3. A URL can be used to fetch the content-to-be-edited from the server, for use in an IFRAME.
4. REST handlers can be called from Javascript to convert content.

Generating content directly in the standard edit template

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.

1. User hits "edit".
2. Editor-specific plugin beforeEditHandler converts topic content to HTML by calling Foswiki::Plugins::WysiwygPlugin::TranslateTML2HTML.
3. User edits and saves
4. Editor-specific plugin afterEditHandler converts HTML back to TML by calling Foswiki::Plugins::WysiwygPlugin::TranslateHTML2TML.

• WysiwygPlugin should not be enabled in configure.
• WYSIWYGPLUGIN_WYSIWYGSKIN should not be set.
• Your plugin should set the textareas_hijacked context id, to signal to skins to suppress their textarea manipulation functions.

This is the recommended integration technique, if your editor can support it.

Generating content directly in a specialised edit template

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.

The flow of control is as follows:

1. User hits "edit" with the skin (or cover) set the same as WYSIWYGPLUGIN_WYSIWYGSKIN.
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
3. The edit template containing the JS editor is instantiated.
4. The following macros are available for expansion in the template:
   • %WYSIWYG_TEXT% expands to the HTML of the content-to-be-edited. This is suitable for use in a textarea.
   • %JAVASCRIPT_TEXT% expands to the HTML of the content-to-be-edited in a javascript constant.
5. User edits and saves
6. The afterEditHandler in the WyswiygPlugin sees that wysiwyg_edit is set, which triggers the conversion back to TML.

• 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.
• WYSIWYGPLUGIN_WYSIWYGSKIN must be set to the name of the skin used for WYSIWYG editing. This is often the name of the editor e.g. xinha.

Fetching content from a URL

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.

The flow of control is as follows:

1. As Generating content directly in a specialised edit template
2. As Generating content directly in a specialised edit template
3. As Generating content directly in a specialised edit template
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
   • The content URL is just a Foswiki view URL with the wysiwyg_edit parameter set.
   • 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.
   • Two macros, %OWEB% and %OTOPIC%, can be used in the content URL in the edit template to refer to the source topic for the content.
5. After edit handling is as for Generating content directly in a specialised edit template

Other techniques

Asynchronous saves

Editors can use XmlHttpRequest to perform saves, by POSTing to the Foswiki 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 CommandAndCGIScripts for details of the other parameters to the save script.

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.

Handling Attachments

Attachment uploads can be handled by URL requests from the editor template to the Foswiki 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:

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

REST handlers

If you are confident in Javascript you can use REST handlers with XmlHttpRequest to convert content from TML to HTML and back again.

The plugin defines the following REST handlers:

.../rest/WysiwygPlugin/html2tml?topic=Web.Topic;text=htmltexttotranslate

Converts the HTML text to TML. topic must be specified.

.../rest/WysiwygPlugin/tml2html?topic=Web.Topic;text=tmltexttotranslate

Converts the TML text to HTML. topic must be specified. The response is a text/plain page of converted content.

Installation Instructions

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.

Open configure, and open the "Extensions" section. "Extensions Operation and Maintenance" Tab -> "Install, Update or Remove extensions" Tab. Click the "Search for Extensions" button. Enter part of the extension name or description and press search. Select the desired extension(s) and click install. If an extension is already installed, it will not show up in the search results.

You can also install from the shell by running the extension installer as the web server user: (Be sure to run as the webserver user, not as root!)

cd /path/to/foswiki
perl tools/extension_installer <NameOfExtension> install

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See https://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Plugin Configuration Settings

Translator control

-- VictorMa - 14 Feb 2013

Implementors note if you are using your own before/after edit handlers, you can call Foswiki::Plugins::WysiwygPlugin::isWysiwygEditable() to check these controls.

Known issues

Incompatible with "non-standard" syntax

WysiwygPlugin is incompatible with plugins that expand non-standard syntax e.g. Foswiki:Extensions.MathModePlugin (WysiwygPlugin)

Plugins that extend the syntax using macros, such as %MYMACRO%, should work fine.

Implementors note plugins that use XML-like tags may call Foswiki::Plugins::WysiwygPlugin::addXMLTag() from their initPlugin handlers to make WysiwygPlugin protect the content between XML-like tags, just like it does for macros.

Overlapping styles

Because Foswiki 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 formatting in the original Foswiki 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

*bold _bold-italic* italic_

is legal in TML, but in HTML is represented by

<strong>bold <em>bold-italic</em></strong> <em>italic</em>

which gets translated back to TML as

*bold _bold-italic_* _italic_

which is correct by construction, but does not render correctly in Foswiki. This problem is unfortunately unavoidable due to the way TML works.

Rowspan processing needs TablePlugin

WysiwygPlugin is able to convert tables with cells that span rows into TML. This requires syntax provided by the TablePlugin (that is, the | ^ | markup). WysiwygPlugin will therefore only perform row-span related conversion if TablePlugin is enabled. TablePlugin is enabled by default and hence WysiwygPlugin converts tables with cells that span rows between TML and HTML by default.

If TablePlugin is not enabled, then TML table cells containing only ^ are not converted to rowspans, and HTML tables containing rowspans are not converted to TML.

TinyMCEPlugin integration

• Foswikitask:Item1396 - Anchors are not handled by WysiwygPlugin
• Foswikitask:Item5955 - WysiwygPlugin fails to roundtrip tables with align="center", border attributes, etc.
  • Description: Sometimes tables will fail to be converted to TML syntax (will stay as HTML) because there are attributes on the table (such as alignment or border decorations) that WysiwygPlugin does not know how to preserve. If such attributes are necessary, please use VarTABLE instead.
  • Work-around:
    • Click inside the offending table
    • Click the table toolbar button (usually used to create a new table)
    • With the exception of Cols and Rows, delete/reset all content from the fields on the 'General' and 'Advanced' tabs.
    • Write a VarTABLE macro above the offending table that adds the desired attributes safely

Info

Many thanks to the following sponsors for supporting this work:

• ILOG
• Carrier Corporation
• TWIKI.NET

Dependencies

Name	Version	Description
JSON	>=0	Required
HTML::Parser	>=3.28	Required for WYSIWYG editing.
HTML::Entities	>=1.25	Required for WYSIWYG editing.
Encode	>=2.01	Required for WYSIWYG editing.

Change History

1.38 (13 Jun 2018)	Foswikitask:Item14731: use JSON.pm to create proper json in attachments rest handler
1.36 (08 Dec 2017)	Foswikitask:Item14554: remove link to unused wikiring.com domain
1.35 (04 Apr 2017)	Foswikitask:Item14324: Unescaped left brace - Perl 5.25.10.
1.34 (26 Nov 2016)	Released with Foswiki 2.1.3 Foswikitask:Item14078: Wysiwyg merges horizontal rules (---) into a preceeding list and looses the TML markup. Foswikitask:Item14253: WysiwygPlugin inserts extra spaces in front of square bracket links.
1.33 (08 Apr 2016)	Released with Foswiki 2.1.1 Foswikitask:Item13960: Editor fails to preserve alignment of cells containing "0". Foswikitask:Item13957: Fix rendering of empty "indent" lines Foswikitask:Item13958: Don't remove empty lines between two indent blocks.
1.32 (10 Dec 2015)	Released with Foswiki 2.1 Foswikitask:Item13405: NFC normalize strings for better OSx compatibility.
1.31 (14 Jun 2015)	Released with Foswiki 2.0 Foswikitask:Item13405: Foswikitask:Item13378: utf-8 support Foswikitask:Item13423: Perl 5.22 deprecations Foswikitask:Item13390: Don't link escaped square bracket links Foswikitask:Item13323: Update scripts to use /usr/bin/env perl Foswikitask:Item13369: Foswikitask:Item13371: Foswikitask:Item13372: Character encoding issues Foswikitask:Item13327: Character encoding issues Foswikitask:Item13345: CGI deprecations Foswikitask:Item13291: URL anchor / query param order was reversed Foswikitask:Item13178: Macros inside html tags were permanently expanded Foswikitask:Item13287: Regular expression enhancements Foswikitask:Item13287: Emit single quotes in HTML, Foswikitask:Item10107: Don't protect macros inside tags
1.3 (21 Jan 2015)	Minor release with many improvements
1.2.3 (16 May 2013)	Foswikitask:Item12444: Fix problem with entities being expanded to unrepresentable characters
1.2.2 (21 Dec 2012)	Foswikitask:Item12278: Changing a wikiword should not require visiting the TinyMCE link dialog. Requires changes to TINYMCEPLUGIN_INIT settings
1.2.1 (16 Dec 2012)	Foswikitask:Item12297: Minor perlcritic coding change
1.2.0 (20 Jun 2012)	Foswikitask:Item8032: enable Foswiki:Extensions.WysiwygFormfieldsPlugin.
1.1.14 (28 Nov 2012)	Foswikitask:Item11912: Clean up hex markers left behind by TinyMCEPlugin Foswikitask:Item11267: Convert to perl version strings Foswikitask:Item12043: Preserve Square bracket links
1.1.13 (5 Jun 2012)	Foswikitask:Item11915: Backslash line continuation incorrectly requires a space dlimitier. Foswikitask:Item11925: Extraneous hex 03 characters replace % in nested tags
1.1.12 (30 May 2012)	Foswikitask:Item11906: Fix for Item10089 caused link corruption in certain cases.
1.1.11 (22 May 2012)	Foswikitask:Item11890: Compile errors with perl 5.8.8 due to use of new regular expression features.
1.1.10 (21 May 2012)	Foswikitask:Item11872: Better fix for <div tags, also cover <blockquote tags. Foswikitask:Item11884: Unable to position cursor above initial verbatim, pre and blockquote blocks Foswikitask:Item2516: Syntax for indent was added earlier, but missed from release notes.
1.1.9 (test release)	Foswikitask:Item11872: <div> tags are wrapped in <p> tags. TMCE auto closes them.
1.1.8 (test release)	Foswikitask:Item11862: Fix for Item11814 breaks %ATTACHURL macro in link.
1.1.7 (test release)	Foswikitask:Item11859: Wysiwyg removes <br /> tags at end of lines.
1.1.6 (test release)	Foswikitask:Item1396: Process TML links as HTML links Foswikitask:Item9305: TMCE should honor NOAUTOLINK preference and noautolink blocks. Foswikitask:Item10089: Allow TMCE to recognize TML links as HTML links. Foswikitask:Item11592: Protect Glue format markup in macros. Foswikitask:Item11722: Don't merge verbatim blocks if they have different classes. Foswikitask:Item11784: Handle colors implemented using CSS classes. Foswikitask:Item11814: Preserve URI Encoding in links. Foswikitask:Item11818: WikiWords escaped with ! are show as linking. Foswikitask:Item11819: TMCE is failing to protect newlines.
1.1.5 (06 Apr 2012)	Foswikitask:Item11603: protect inline script and style tags from wysiwyg. Foswikitask:Item11440: protect tags inside pre. Foswikitask:Item9259: Protect TML tables from corrupting embedded html markup. Foswikitask:Item10125: Prevent #Anchors from being wrapped to the previous line. Foswikitask:Item11312: Prevent corruption of HTML tables containin blank lines.
1.1.4	Foswikitask:Item11378: support pass-through of DEL and INS tags
1.1.3 (08 Nov 2011)	Foswikitask:Item2174: Fix WysiwygPlugin eating newlines inside %MACRO{...} expressions (Michael Tempest)
1.1.2 (11 Apr 2011)	Version released with Foswiki 1.1.3. Only a minor change related to how the plugin is being upgraded
1.1.1 (19 Jan 2011)	Foswikitask:Item10271: Switch to x.y.z release numbering Foswikitask:Item10048: Try to use Macros in the src URLs of images with titles Foswikitask:Item9973: Fix attachments REST handler to deal with topics named with international characters Foswikitask:Item1391: Protect div and span tags with style attributes
28 Jun 2010	Foswikitask:Item761, Foswikitask:Item2311, Foswikitask:Item5990, Foswikitask:Item9170: Fix conversion between character encodings. Any characters may be entered in the WYSIWYG editor, regardless of the site's encoding. Where possible, they are converted to the site encoding, otherwise they become entities. Foswikitask:Item2254: Fix cursor-movement problems on Mozilla browsers (introduced by Foswikitask:Item1798) Foswikitask:Item2605: Can now place cursor into empty list-item Foswikitask:Item1417: Can now move cursor above a table at start of a topic and below a table at the end of the topic Foswikitask:Item9148: Protect <br /> tags at the end of a protected line (e.g. in a macro parameter) Foswikitask:Item6068: Protect newlines within a <pre> block Foswikitask:Item2259: Keep the content of <big> and <var> tags Foswikitask:Item8289: Fix stand-alone (command-line) HTML-to-TML conversion
21 May 2010	Foswikitask:Item5221: Use Wysiwyg transition to remove usually unwanted paragraph html tags in table cells, which are otherwise impossible to remove in TinyMCE up to at least 3.3.6 Foswikitask:Item8274: Fix problem where Wysiwyg transition merges two consecutive lists (a result of work on Foswikitask:Item2254)
17 Jan 2010	Foswikitask:Item2337: ATTACHFILESIZELIMIT check fails confusingly if value is "0 "
18 Dec 2009	Foswikitask:Item2511: move code out of the plugin module to accelerate loading
18 Nov 2009	Foswikitask:Item2369: Convert tables with cells that span rows
22 Oct 2009	Foswikitask:Item2183: Protect div style= by default
18 Sep 2009	Foswikitask:Item1980: Prevent dataloss when saving a topic in Wysiwyg where there are a pair of sticky tags inside verbatim tags
28 Jun 2009	Foswikitask:Item1770: Protect XML tags registered by plugins, and not just the content between them (Michael Tempest)
06 Jun 2009	Foswikitask:Item1013: Correct dependency on HTML::Parser (Will Norris) Foswikitask:Item1397: Foswikitask:Item1535: Foswikitask:Item1666: Correct processing of colour and typewriter-text in several situations, include application to bold text and table cells (Michael Tempest) Foswikitask:Item1667: Remove unwanted extra <sticky> tags (Michael Tempest) Foswikitask:Item1674: Let plugins register XML tags that should be protected like macros
10 Apr 2009	Foswikitask:Item1394: fixed colour handling
03 Dec 2008	Foswikitask:Item6041: fixed empty bullet list problem. Foswiki version
22 Oct 2008	Fixed TWikibug:Item5961 (emphasis), TWikibug:Item6089 (backslash in verbatim)
07 Aug 2008	Fixed TWikibug:Item5707 (mod_perl)
See Subversion logs for earlier versions