TinyMCEPlugin

Integration of the Tiny MCE WYSIWYG Editor

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 Foswiki:Extensions.WysiwygPlugin to translate text to and from a format that TinyMCE can edit.

Unlike the other editor integrations in Foswiki, 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 Foswiki content it can't handle, such as complex macros.

Editor Notes

The editor uses a translator module to convert from Foswiki Topic Markup Language (TML) to HTML and back. The translator converts special macros - such as %MACROS% - 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 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 Foswiki. You should only need to re-install if there is an upgrade to the plugin.
• It requires the very latest revision of WysiwygPlugin.
• When installed, it replaces the old "textarea" editor. The default Foswiki skin provides access to the plain text editor by adding a Raw Edit link at the bottom of the page.

First follow the installation instructions to install the Plugin:

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. Use "Find More Extensions" to get a list of available extensions. Select "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 http://foswiki.org/Support/ManuallyInstallingExtensions for more help.

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

Preferences

If you want to change any of the preferences you are recommended to copy the examples below and paste them into your own preference settings. The settings in this topic are just examples and have no effect.

The preference setting TINYMCEPLUGIN_INIT lets you redefine all the options passed to the Tiny MCE editor on startup. For a full explanation of the available options, and guidance on reconfiguring Tiny MCE, see the Moxicode TinyMCE Wiki. The default options are as follows. Note the inclusion of the Pattern Skin standard CSS files in the content_css setting.

mode:"textareas",
editor_selector : "foswikiWysiwygEdit",
save_on_tinymce_forms: true,
cleanup : true,
theme : "advanced",
convert_urls : true,
relative_urls : false,
remove_script_host : false,
dialog_type: "modal",
extended_valid_elements : "li[type]",
forced_root_block : false,
setupcontent_callback : FoswikiTiny.setUpContent,
urlconverter_callback : "FoswikiTiny.convertLink",
foswikipuburl_callback : "FoswikiTiny.convertPubURL",
save_callback : "FoswikiTiny.saveCallback",
%IF{"$TINYMCEPLUGIN_DEBUG" then="debug:true,"}%
plugins : "table,searchreplace,autosave,paste,safari,inlinepopups,fullscreen,foswikibuttons,foswikiimage%IF{ "context TinyMCEUsabilityUpgradePluginEnabled" then=",foswikilink" else=""}%",
foswiki_secret_id : "%WYSIWYG_SECRET_ID%",
foswiki_vars : { PUBURLPATH : "%PUBURLPATH%", PUBURL : "%PUBURL%", WEB : "%WEB%", TOPIC : "%TOPIC%", ATTACHURL : "%ATTACHURL%", ATTACHURLPATH : "%ATTACHURLPATH%", VIEWSCRIPTURL : "%SCRIPTURL{view}%", SCRIPTSUFFIX: "%SCRIPTSUFFIX%", SCRIPTURL : "%SCRIPTURL%", SYSTEMWEB: "%SYSTEMWEB%" },
theme_advanced_toolbar_align : "left",
foswikibuttons_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 : "foswikiformat,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,fullscreen",
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",
keep_styles : false,
content_css : "%PUBURLPATH%/%SYSTEMWEB%/TinyMCEPlugin/wysiwyg%IF{"$TINYMCEPLUGIN_DEBUG" then="_src"}%.css,%PUBURLPATH%/%SYSTEMWEB%/SkinTemplates/base.css,%FOSWIKI_STYLE_URL%,%FOSWIKI_COLORS_URL%"

You can set additional options for specific browsers. You can define extra options for MSIE, OPERA, GECKO and SAFARI. For example,

   * Set TINYMCEPLUGIN_INIT_MSIE = paste_auto_cleanup_on_paste : true

The defaults are:

    MSIE => 'paste_auto_cleanup_on_paste : true',
    OPERA => '',
    GECKO => 'gecko_spellcheck : true',
    SAFARI => '',

• Warning: if you enable paste_auto_cleanup_on_paste then it automatically implies paste_use_dialog on all non-MSIE browsers.

You can disable the plugin in any web or topic, or for any specific user, by setting TINYMCEPLUGIN_DISABLE to 1. e.g.

   * Set TINYMCEPLUGIN_DISABLE = 1

The plugin also respects the global NOWYSIWYG setting, which affects all WYSIWYG editors.

Some browsers don't support Tiny MCE. 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). For a full list of supported browsers see http://wiki.moxiecode.com/index.php/TinyMCE:Compatibility

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. You can set it up to veto an edit if the topic contains:

• 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>)
• HTML comments (<!-- ... -->)

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

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

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. For example, setting it to table=background,lang;tr=valign will stop the translator from trying to handle any table tag that has background or lang attributes, and any tr tag that has a valign attribute.

You can use perl regular expressions to match tag and attribute names, so .*=id,on.* will ensure that any tag with an on* event handler is kept as HTML.

The default setting for this preference is:

    .*=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;
    DL=compact;
    FONT=size,face;
    H\d=align;
    HR=align,noshade,size,width;
    LEGEND=accesskey,align;
    LI=type,value;
    OL=compact,start,type;
    P=align;
    PARAM=name,type,value,valuetype;
    PRE=width;
    Q=cite;
    TABLE=align,bgcolor,border,cellpadding,cellspacing,frame,rules,summary,width;
    TBODY=align,char,charoff,valign;
    TD=abbr,align,axis,bgcolor,char,charoff,colspan,headers,height,nowrap,rowspan,scope,valign,width;
    TFOOT=align,char,charoff,valign;
    TH=abbr,align,axis,bgcolor,char,charoff,colspan,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.

You can use the preference setting TINYMCEPLUGIN_DEBUG to make the editor load uncompressed Javascript and CSS. This is very helpful when debugging. e.g.

   * Set TINYMCEPLUGIN_DEBUG = 1

Frequently Asked Questions

The topic TinyMCEFrequentlyAskedQuestions contains more help with things like: "How do I configure the buttons in my skin?", "How do I disable the WYSIWYG?" etc.

Plugin Info

Another great Foswiki extension from the WikiRing - working together to improve your wiki experience!

Author:	Crawford Currie
Copyright:	© 2007-2009 Crawford Currie http://c-dot.co.uk
License:	GPL (Gnu General Public License)
	This package also includes the complete sources for version 3.2.2 of the TinyMCE editor which is covered by its own license.
Version:	5054 (2009-09-20)
Release:	20 Sep 2009
Change History:
20 Sep 2009	Foswikitask:Item2121: Remove 2 MB of developer files that are not used
19 Sep 2009	Foswikitask:Item2037: Fix fullscreen-to-WikiText transition
18 Sep 2009	Foswikitask:Item1798: Fixed a problem where editor wants to put text elements into blocks causing unwanted new lines. Foswikitask:Item1341: Fixed a problem so that editor does not convert TML lettered and roman numeral lists back to numbered lists.
03 Jul 2009	Foswikitask:Item8178: Check that the help elements are present before hiding or showing them, as they are not present in all skins.
06 Jun 2009	Foswikitask:Item5628: Make browser reload the javascript when this plugin is upgraded (Michael Tempest, Colas Nahaboo) Foswikitask:Item1529: Disable "Wiki text" button until editor has loaded topic text (Michael Tempest)
24 May 2009	Foswikitask:Item1205: add support for global NOWYSIWYG flag Foswikitask:Item1341: keep TML lettered & roman numeral lists (Michael Tempest) Foswikitask:Item1534: fix typewriter text (Michael Tempest) Foswikitask:Item1548: fix data-loss warning when saving from wiki-text (Michael Tempest)
10 Apr 2009	Foswikitask:Item1394: fixed colour handling Foswikitask:Item8108: added safari,inlinepopups,fullscreen plugins, fixed some minor bugs on IE
03 Apr 2009	Foswikitask:Item1383: Optimised the preferences Foswikitask:Item8094: fixed the pickaxe
15 Mar 2009	Foswikitask:Item930: Crawford Currie upgraded to Tiny MCE 3.2.2 and recoded all the standard plugins that had to be recoded
21 Jan 2009	Foswikitask:Item833: added SYSTEMWEB to foswiki_vars, simplifying the activation of the foswikilink dialog of TinyMCEUsabilityUpgradePlugin? (if installed) - Eugen Mayer
06 Dec 2008	Foswikitask:Item5859: removed XHR headers that were banjaxing NTLM - Eugen Mayer
03 Dec 2008	Crawford Currie re-released for the Foswiki project
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
11 Sep 2007	TWikibug:Item4535 refinements to link handling to improve topic name recognition
07 Sep 2007	TWikibug:Item4503 excess empty lines TWikibug:Item4486 no toc headers with unofficial syntax TWikibug:Item4560: empty lines lost TWikibug:Item4566: corrupted table on save
06 Sep 2007	TWikibug:Item4557 added missing files to package
04 Sep 2007	TWikibug:Item4534 TWikibug:Item4535 fixed
14679	TWikibug:Item4481 TWikibug:Item4524 fixed
14668	Bugfixes and refinements done as part of 4.2 release
14543	Added PROTECTED style, to allow protection of special text. Disable on unsupported browsers (untested)
14538	First release
Dependencies:	Name Version Description Foswiki::Contrib::BehaviourContrib >=0 Javascript module Foswiki::Plugins::WysiwygPlugin >=4315 Translator module
Plugin Home:	http://foswiki.org/Extensions/TinyMCEPlugin
Support:	http://foswiki.org/Support/TinyMCEPlugin

Many thanks to the following sponsors for supporting this work:

• ILOG
• Carrier Corporation
• TWIKI.NET