Wysiwyg Plugin

Features

• Supports the input of malformed HTML

• Framework is editor-agnostic

Details

What's in the package

The package includes the following pieces:

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

How it works

Using the translators from Perl scripts

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

Integrating a HTML Editor

1. A URL can be used to fetch the content-to-be-edited from the server, for use in an IFRAME.
2. REST handlers can be called from Javascript to convert content.

• Your plugin should set the textareas_hijacked context id, to signal to skins to suppress their textarea manipulation functions.

The flow of control is as follows:

1. User hits "edit" with the skin (or cover) set the same as WYSIWYGPLUGIN_WYSIWYGSKIN.

1. The edit template containing the JS editor is instantiated.
2. The following variables are available for expansion in the template:

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

Fetching content from a URL

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

Other techniques

Asynchronous saves

Handling Attachments

• 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

Plugin Installation Instructions

• For an automated installation, run the configure script and follow "Find More Extensions" in the in the Extensions section.
  • See the installation supplement on TWiki.org for more information.

• • Configure additional plugin settings in the Extensions section if needed.
  • Test if the installation was successful using the examples provided.

Plugin Configuration Settings

Plugin Configuration Settings

Translator control

WYSIWYG_EXCLUDE - Prevent WYSIWYG editing

The global preference setting 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
• variables - simple variables (e.g. %SOMEVAR%) or
• calls - variables with parameters e.g. %SOMECALL{...}%
• pre - pre-formatted blocks (<pre>)
• comments - HTML comments (<!-- ... -->)
• script - inline HTML Script tags - default
• style - inline CSS style tags - default
• table - inline HTML tables (<table ..>. TML tables are not excluded)

If the plugin detects an excluded construct in the topic, it will refuse to allow the edit and will redirect to the default editor.

WYSIWYG_EDITABLE_CALLS - Exceptions to WYSIWYG_EXCLUDE

If you excluded calls in WYSIWYG_EXCLUDE, you can still define a subset of variables that do not block edits. this is done in the global preference setting WYSIWYG_EDITABLE_CALLS, which should be a list of variable 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 TWikiPreferences, or in WebPreferences for each web.

WYSIWYGPLUGIN_PROTECT_EXISTING_TAGS - Protect specific tags originally in the topic text

The 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 preference, <sticky> blocks, <literal> blocks and the rules applied to tables and lists.

WYSIWYGPLUGIN_PROTECT_TAG_BLOCKS - Protect specific tag blocks originally in the topic text

The 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 - Protect tags based upon their arguments

You can define the global preference 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 to table=background,lang;tr=valign will stop the translator from trying to convert any table tag that has background or lang attributes, and any tr tag that has a valign attribute back to TWiki | table | column | markup (regardless of where that table 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 is tag1=attrib,attrib;tag2=attrib. Attributes delimited by comma, and tags delimited by semicolon.

• The left side of the equal sign is the tag.
• The right side of the equal sign is a comma delimited list of attributes to be matched.

If a matching tag is found, that matches any of the attributes listed, the tag will not be converted back to TML. You can use perl regular expressions to match tag and attribute names, so .*=id,on.* will ensure that any tag with an id or on* event handler is kept as HTML.

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,frame,rules,summary,width;
        TBODY=align,char,charoff,valign;
        TD=abbr,align,axis,bgcolor,char,charoff,headers,height,nowrap,rowspan,scope,valign,width;
        TFOOT=align,char,charoff,valign;
        TH=abbr,align,axis,bgcolor,char,charoff,height,nowrap,rowspan,scope,valign,width,headers;
        THEAD=align,char,charoff,valign;
        TR=bgcolor,char,charoff,valign;
        UL=compact,type

<-- %JQREQUIRE{"chili"}%

        (?!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,frame,rules,summary,width;
        TBODY=align,char,charoff,valign;
        TD=abbr,align,axis,bgcolor,char,charoff,headers,height,nowrap,rowspan,scope,valign,width;
        TFOOT=align,char,charoff,valign;
        TH=abbr,align,axis,bgcolor,char,charoff,height,nowrap,rowspan,scope,valign,width,headers;
        THEAD=align,char,charoff,valign;
        TR=bgcolor,char,charoff,valign;
        UL=compact,type

-->

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

Known issues

Incompatible with "non-standard" syntax

Overlapping styles

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 formatting 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