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.
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.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 intools/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
.
beforeEditHandler
and an afterEditHandler
. These handlers are responsible for the conversion of topic text to HTML, and post-conversion of HTML back to TML. beforeEditHandler
converts topic content to HTML by calling Foswiki::Plugins::WysiwygPlugin::TranslateTML2HTML
.
afterEditHandler
converts HTML back to TML by calling Foswiki::Plugins::WysiwygPlugin::TranslateHTML2TML
.
configure
.
WYSIWYGPLUGIN_WYSIWYGSKIN
should not be set.
textareas_hijacked
context id, to signal to skins to suppress their textarea manipulation functions.
WYSIWYGPLUGIN_WYSIWYGSKIN
must be set for this to work.
The flow of control is as follows: WYSIWYGPLUGIN_WYSIWYGSKIN
.
beforeEditHandler
determines if the topic is WYSIWYG editable, and vetos the edit if not by redirecting to the standard edit skin. the edit
edit
template containing the JS editor is instantiated.
%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.
afterEditHandler
in the WyswiygPlugin sees that wysiwyg_edit
is set, which triggers the conversion back to TML.
<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
.
IFRAME
.
The flow of control is as follows: IFRAME
or a XmlHttpRequest
) to obtain the HTML document to be edited view
URL with the wysiwyg_edit
parameter set.
wysiwyg_edit
parameter and uses the TML2HTML translator to prepare the text, which is then returned as text/plain
to the browser.
%OWEB%
and %OTOPIC%
, can be used in the content URL in the edit template to refer to the source topic for the content.
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.
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: IFRAME
or via XmlHttpRequest
, then the 302 redirect at the end of the upload can simply be ignored.
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.
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.
cd /path/to/foswiki perl tools/extension_installer <NameOfExtension> installIf 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.
WYSIWYG_EXCLUDE
can be set to make the plugin sensitive to what is in a topic, before allowing it to be edited. The comma separated list to fall back to text edit can include: html
- HTML tags (e.g. <div>
, not including <br>), or
macros
- simple macros (e.g. %VAR%
) or
calls
- macros with parameters e.g. %MACRO{...}%
pre
blocks (<pre>
)
comments
(<!--
… -→
)
script
= inline HTML Script tags - default
style
= inline Css style tags - default
table
= inline html tables (=<table ..>. TML tables are not excluded)
calls
in WYSIWYG_EXCLUDE
, you can still define a subset of macros that do not block edits. this is done in the global preference setting WYSIWYG_EDITABLE_CALLS
, which should be a list of macro names separated by vertical bars, with no spaces, e.g: * Set WYSIWYG_EDITABLE_CALLS = COMMENT|CALENDAR|INCLUDE
You should set WYSIWYG_EXCLUDE
and WYSIWYG_EDITABLE_CALLS
in SitePreferences, or in WebPreferences for each web.
WYSIWYGPLUGIN_PROTECT_EXISTING_TAGS
preference tells the translator
that certain HTML tags which were originally in the topic text should remain as HTML tags;
the translator will not try to convert them to TML. This protects the tags
themselves, and not the contents enclosed between the <tag>
and </tag>
The default setting for this preference is defined within the plugin.
It corresponds to div, span
.
This feature may be disabled by setting the preference to a single comma.
This does not guarantee that HTML markup will be removed; the conversion
of HTML tags to TML markup remains subject to the other controls provided
by the WysiwygPlugin, including the WYSIWYGPLUGIN_STICKYBITS
and
WYSIWYGPLUGIN_IGNOREATTRS
preferences,
<sticky>
blocks, <literal>
blocks and the rules applied
to tables and lists.
WYSIWYGPLUGIN_PROTECT_TAG_BLOCKS
preference tells the translator
that certain HTML tag blocks which were originally in the topic text should remain as HTML blocks;
the translator will not try to convert them to TML.
The default setting for this preference is defined within the plugin.
It corresponds to script, style
.
As an example, individual html tables can be protected by surrounding them
with =<sticky> .. </sticky> block. However,if you want to have all
=<table> markup preserved as entered into topics by default, rather than subject to
WYSIWYG editing, add table
to this list, and =<table> markup will become
automatically sticky.
This feature may be disabled by setting the preference to a single comma.
WYSIWYGPLUGIN_STICKYBITS
to stop the
plugin from ever trying to convert specific HTML tags into
TML when certain specific attributes are present on the tag. This is most
useful when you have styling or alignment information in tags that must be
preserved.
This preference setting is used to tell the translator which attributes, when present
on a tag, make it "stick" i.e. block conversion back to TML. For example, setting it totable=background,lang;tr=valign
will stop the translator from trying to convert anytable
tag that hasbackground
orlang
attributes, and anytr
tag that has avalign
attribute back to Foswiki| table | column |
markup (regardless of where thattable
tag comes from).
This setting is used only after the page has been processed by the editor. If the editor does not support a particular tag or attribute and the editor corrupts the tag, this setting will not be helpful. It is only used to prevent an HTML tag from being converted back to TML.
Format of the setting istag1=attrib,attrib;tag2=attrib
. Attributes delimited by
comma, and tags delimited by semicolon. .*=id,on.*
will ensure that any tag with an id or on*
event handler is kept as
HTML.
Note: HTML has been gradually deprecating HTML attributes, replacing
them with equivalent styles. For example, the table, row and cell background
color attribute: bgcolor="#123456"
has been deprecated, replaced with style="background-color: #123456;"
A limited subset of tags ( table, th, tr, td
) will match against both the
attributes and the style components. Styles have been added to the default
setting.
The default setting for this preference are hard coded in the plugin. If you
wish to change the settings, the following list is the default setting coded
in the plugin:
* Set WYSIWYGPLUGIN_STICKYBITS = (?!IMG).*=id,lang,title,dir,on.*; A=accesskey,coords,shape,target; BDO=dir; BR=clear; COL=char,charoff,span,valign,width; COLGROUP=align,char,charoff,span,valign,width; DIR=compact; DIV=align,style; DL=compact; FONT=size,face; H[0-9]=align; HR=align,noshade,size,width; LEGEND=accesskey,align; LI=value; OL=compact,start,type; P=align; PARAM=name,type,value,valuetype; PRE=width; Q=cite; TABLE=align,bgcolor,.*?background-color:.*,frame,rules,summary,width; TBODY=align,char,charoff,valign; TD=abbr,align,axis,bgcolor,.*?background-color:.*,.*?border-color:.*,char,charoff,headers,height,nowrap,rowspan,scope,valign,width; TFOOT=align,char,charoff,valign; TH=abbr,align,axis,bgcolor,.*?background-color:.*,char,charoff,height,nowrap,rowspan,scope,valign,width,headers; THEAD=align,char,charoff,valign; TR=bgcolor,.*?background-color:.*,char,charoff,valign; UL=compact,typeIf you edit using the plain-text editor, you can use the <sticky>..</sticky> tags to delimit HTML (or TML) that you do not want to be WYSIWYG edited.
WYSIWYGPLUGIN_STICKYBITS
. It
specifies tags and their attributes that are to be ignored when making the
decision whether to keep the tag or not. For example, a <font face="Open Sans">
tag will normally be maintained in the TML. However setting
WYSIWYGPLUGIN_IGNOREATTRS
to font=face
will result in it being removed.
By default WYSIWYGPLUGIN_IGNOREATTRS
is empty. WYSIWYGPLUGIN_STICKYBITS
takes precedence over this setting.
Implementors note if you are using your own before/after edit handlers, you can call Foswiki::Plugins::WysiwygPlugin::isWysiwygEditable()
to check these controls.
%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.
*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.
| ^ |
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.
Cols
and Rows
, delete/reset all content from the fields on the 'General' and 'Advanced' tabs.
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. |
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 |
Author | Crawford Currie, Foswiki Contributors |
Version | 1.38 |
Release | 13 Jun 2018 |
Description | Translator framework for WYSIWYG editors |
Repository | https://github.com/foswiki/distro |
Copyright | © ILOG 2005 http://www.ilog.fr, © 2008-2022 Foswiki Contributors, All Rights Reserved |
License | GPL (Gnu General Public License) |
Home | http://foswiki.org/Extensions/WysiwygPlugin |
Support | http://foswiki.org/Support/WysiwygPlugin |