TinyMCEPlugin

Page contents

Integration of the TinyMCE WYSIWYG Editor

Introduction

This is an integration of the WYSIWYG editor. This is great little editor, fast and highly functional, and supporting a wide range of browsers, including Firefox, IE and Safari. At the time of writing it doesn't work with Opera or Konqueror.

The integration uses the TWiki:Plugins.WysiwygPlugin to translate text to and from a format that TinyMCE can edit.

Unlike the other editor integrations in TWiki, which install "Word in a Browser" style editors, this plugin is able to swap out the standard text areas in an edit and replace them with WYSIWYG editors. This means you get WYSIWYG editors for textareas in forms, as well as for the main text of the topic. It can also co-exist alongside other WYSIWYG editors, such as Kupu.

The editor automatically "switches itself off" (i.e. reverts to the old text-only window) when editing topics that contain TWiki content it can't handle, such as complex TWiki variables.

Editor Notes

The editor uses a translator module to convert from TWiki markup language (TML) to HTML and back. The translator converts special TWiki tags - such as %VARIABLES% - to plain text, and encloses them within HTML spans using a special style called WYSIWYG_PROTECTED. In this way the editor can detect text that is not meant to be HTML formatted. This style is also used to protect special text you enter into the editor from being interpreted when the topic is translated back into TML. If you want to add any special TWiki features that are sensitive to formatting, such as Set statements, then you have to format those regions using 'Protect on save' or 'Protect forever'.

Installation Instructions

NOTES:

This plugin comes pre-installed on TWiki. You should only need to re-install if there is an upgrade to the plugin.
It requires the very latest revision of WysiwygPlugin. It will not work with the version shipped with TWiki 4.1.2.
When installed, it replaces the old "textarea" editor. If you want to maintain access to the old editor from the standard screens, follow the instructions under Configuring the buttons on TWiki < 4.2.0.

First follow the installation instructions to install the Plugin:

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

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.

Or, follow these manual installation steps:
- Download the ZIP file from the extension home on twiki.org (see below).
- Unzip TinyMCEPlugin.zip in your twiki installation directory.
- Set the ownership of the extracted directories and files to the webserver user.
- Install the dependencies (if any).

Plugin configuration and testing:
- Run the configure script and enable the plugin in the Plugins section.
- Configure additional plugin settings in the Extensions section if needed.
- Test if the installation was successful using the examples provided.

Enable the WysiwygPlugin in configure.
Enable the TinyMCEPlugin in configure.
Click on edit of any topic.

Settings

You can override this setting by defining TINYMCEPLUGIN_DEBUG to enable some simple debug features.

Set DEBUG = 0

This setting contains all the options passed to the TinyMCE editor on startup. For a full explanation of the available options, and guidance on reconfiguring TinyMCE, see the Moxicode TinyMCE Wiki. Note the inclusion of the Pattern Skin standard CSS files in the content_css setting.

   * Set INIT = mode:"textareas",
   editor_selector : "twikiTextarea",
   save_on_tinymce_forms: true,
   cleanup : true,
   theme : "advanced",
   convert_urls : true,
   relative_urls : false,
   remove_script_host : false,
   setupcontent_callback : TWikiTiny.setUpContent,
   urlconverter_callback : "TWikiTiny.convertLink",
   hide_instance_callback : TWikiTiny.switchToRaw,
   show_instance_callback : TWikiTiny.switchToWYSIWYG,
   twikipuburl_callback : "TWikiTiny.convertPubURL",
   save_callback : "TWikiTiny.saveCallback",
   %IF{"$TINYMCEPLUGIN_DEBUG" then="debug:true,"}%
   plugins : "table,searchreplace,autosave,paste,twikibuttons,twikiimage%IF{"$TINYMCEPLUGIN_DEBUG" then=",devkit"}%",
   twiki_secret_id : "%WYSIWYG_SECRET_ID%",
   twiki_vars : { PUBURLPATH : "%PUBURLPATH%", PUBURL : "%PUBURL%", WEB : "%WEB%", TOPIC : "%TOPIC%", ATTACHURL : "%ATTACHURL%", ATTACHURLPATH : "%ATTACHURLPATH%", VIEWSCRIPTURL : "%SCRIPTURL{view}%", SCRIPTSUFFIX: "%SCRIPTSUFFIX%", SCRIPTURL : "%SCRIPTURL%" },
   theme_advanced_toolbar_align : "left",
   twikibuttons_formats : [
   { name: "Normal", el: "", style: null },
   { name: "Heading 1", el: "h1", style: false },
   { name: "Heading 2", el: "h2", style: false },
   { name: "Heading 3", el: "h3", style: false },
   { name: "Heading 4", el: "h4", style: false },
   { name: "Heading 5", el: "h5", style: false },
   { name: "Heading 6", el: "h6", style: false },
   { name: "VERBATIM", el: "pre", style: "TMLverbatim" },
   { name: "LITERAL", el: "span", style: "WYSIWYG_LITERAL" },
   { name: "Protect on save", el: null, style: "WYSIWYG_PROTECTED" },
   { name: "Protect forever", el: null, style: "WYSIWYG_STICKY" }
   ],
   paste_create_paragraphs : true,
   paste_create_linebreaks : false,
   paste_convert_middot_lists : true,
   paste_convert_headers_to_strong : false,
   paste_remove_spans: true,
   paste_remove_styles: true,
   paste_strip_class_attributes: "all",
   theme_advanced_buttons1 : "twikiformat,separator,bold,italic,tt,colour,removeformat,separator,bullist,numlist,outdent,indent,separator,link,unlink,anchor,separator,attach,image,charmap,hr,separator,undo,redo,separator,search,replace",
   theme_advanced_buttons2: "tablecontrols,separator,code,hide",
   theme_advanced_buttons3: "",
   theme_advanced_toolbar_location: "top",
   theme_advanced_resize_horizontal : false,
   theme_advanced_resizing : true,
   theme_advanced_path: false,
   theme_advanced_statusbar_location : "bottom",
   content_css : "%PUBURLPATH%/%SYSTEMWEB%/TinyMCEPlugin/wysiwyg%IF{"$TINYMCEPLUGIN_DEBUG" then="_src"}%.css,%PUBURLPATH%/%SYSTEMWEB%/TWikiTemplates/base.css,%TWIKISTYLEURL%,%TWIKICOLORSURL%"

Additional settings for specific browsers.
- Warning: if you enable paste_auto_cleanup_on_paste then it automatically implies =past_use_dialog on all non-MSIE browsers.
- Set INIT_MSIE = paste_auto_cleanup_on_paste : true
- Set INIT_OPERA =
- Set INIT_GECKO =
- Set INIT_SAFARI =

You can override these settings in the same way as any other TWiki variable, by setting e.g. TINYMCEPLUGIN_INIT in the site, web or topic preferences. You are not recommended to edit the setting here.

You can disable the plugin in any web or topic, or for any specific user, by setting the TINYMCEPLUGIN_DISABLE preferences setting to 1.
- Alternatively (preferred), you can give the user an option to use the WYSIWYG editor or raw editor with the EDITMETHOD preferences setting set to wysiwyg (default) or raw.
Some browsers don't support TinyMCE. You can prevent the editor from being invoked on these browsers by setting TINYMCEPLUGIN_BAD_BROWSERS to a regular expression that matches the user-agent string for any broken browsers. The default is (?i-xsm:Konqueror|Opera).

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

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.

Configuring the buttons on TWiki < 4.2.0

When installed on TWiki versions before 4.2.0, this plugin replaces the old textarea editor with the TinyMCE editor. The shock of this change can be too much for some older contributors, so we have written instructions for reconfiguring your templates in TWiki:Plugins.TinyMCEFrequentlyAskedQuestions.

Plugin Info

Many thanks to the following sponsors for supporting this work:

Plugin Author:

TWiki:Main.CrawfordCurrie

,
© 2007-2011 TWiki:TWiki.TWikiContributor

This package also includes the complete sources for version 3.2.4.1 of the TinyMCE editor

License:

GPL (Gnu General Public License)

Plugin Version:

2011-07-10 21643 (2012-12-16)

Change History:

2011-07-10:

TWikibug:Item6725

: Change global package variables from "use vars" to "our"

2010-11-05

TWikibug:Item6604

: Add documentation for EDITMETHOD setting

2010-04-24

TWikibug:Item6433

: Doc improvements, prepare for TWiki 5.0 release

2009-09-08

TWikibug:Item6334

: Upgrade plugin to latest TinyMCE version 3.2.4.1 from 2.1.1.1 -- TWiki:Main/SopanShewale

03 Aug 2008

TWiki 4.2.1 release version

04 May 2008

TWikibug:Item5547

: Change mechanism by which TMCE recognises textareas to camp on. Use class instead of element name.

12 Apr 2008

TWikibug:Item4946

: I think I have finally fixed non-iso-8859-1 character sets. Painful.

31 Mar 2008

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. NOTE: YOU MUST UPGRADE WysiwygPlugin TO 16600 OR LATER

28 Mar 2008

TWikibug:Item5432

: added upper case file extensions for images TWikibug:Item5206

: fixed expansion of simple filenames entered in image popup TWikibug:Item5462

: fixed hide attachment switch

25 Jan 2008

TWikibug:Item5287

: links entered through dialog weren't working

24 Jan 2008

TWikibug:Item4840

: TWikibug:Item5138

: UTF8 fixes, 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, TWikibug:Item5254

: non-fatal JS error fixed, TWikibug:Item5263

: remove preview on WYSIWYG edit, TWikibug:Item5116

: added Opera to bad browsers filter

20 Dec 2007

TWikibug:Item5047

: disable save and preview during page load TWikibug:Item5111

: make the entry in the format menu sensitive to where the cursor is 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.

19 Nov 2007

TWikibug:Item4742

: auto-disable if Wysiwyg is not enabled TWikibug:Item4820

: validate mandatory fields on save TWikibug:Item4747

: add <sticky> TWikibug:Item4811

: noautolink looks 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:Item4817

: added typewriter text button TWikibug:Item4850

: added font colour controls TWikibug:Item4645

: added attachment management features TWikibug:Item4945

: added switch to raw and back

16 Sep 2007

TWikibug:Item4630

: polished up the way the secret string is done, to ensure synch between perl and JS. TWikibug: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). TWikibug:Item4603

: added the draft help, so we can at least build the beta without the nasty warning

13 Sep 2007

TWikibug:Item4613

fixed navigate-away prompt when unchanged TWikibug:Item4583

TWikibug:Item4604

TWikibug:Item4614

TWikibug:Item4616

A clutch of issues caused by use of the wrong encoding function when passing UTF8 parameters to REST using XMLHttpRequest.

12 Sep 2007

TWikibug:Item4604

Converted to REST call for content conversion, to provide safe callback if JS is disabled in the browser TWikibug:Item4583

relaxed regex to try and make it work for UTF-8 topic names