TinyMCEPlugin
Integration of the Tiny MCE WYSIWYG Editor
This is an integration of the fast and highly functional
WYSIWYG editor. It supports a wide range of browsers, including Firefox, IE, Safari, Opera and Google Chrome (see
compatibility chart). At the time of writing it doesn't work with Konqueror.
The integration uses the
Foswiki:Extensions.WysiwygPlugin to translate text to and from a format that TinyMCE can edit.
This plugin is able to swap out
standard text areas 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.
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 should 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. You may still access the plaintext editor with the "Wiki Text" button provided in the toolbar, however this does not necessarily give you the original raw topic content. To bypass the TML to HTML conversion process entirely, use the Raw Edit link provided by the default Foswiki skin 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.
Preferences
No preferences are stored in this topic. The example settings here have no effect. To learn more about setting preference variables, see the
PreferenceSettings topic.
TINYMCEPLUGIN_INIT
This variable holds all the options passed to the TinyMCE editor on startup. For a full explanation of available TinyMCE options, and guidance on reconfiguring TinyMCE, see the
Moxicode TinyMCE Wiki.
The default options are as follows (you will need to remove the newlines for your own
TINYMCEPLUGIN_INIT
string). 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: "div", style: null },
{ name: "Heading 1", el: "h1", style: null },
{ name: "Heading 2", el: "h2", style: null },
{ name: "Heading 3", el: "h3", style: null },
{ name: "Heading 4", el: "h4", style: null },
{ name: "Heading 5", el: "h5", style: null },
{ name: "Heading 6", el: "h6", style: null },
{ 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,blockquote,separator,link,unlink,anchor,separator,undo,redo,separator,search,replace",
theme_advanced_buttons2: "tablecontrols,separator,attach,image,charmap,hr,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%"
Settings
Variable |
Default |
Description |
TINYMCEPLUGIN_INIT |
As above |
Holds the initialization parameters used to start TinyMCE |
TINYMCEPLUGIN_INIT_browser |
See Browser Specific Settings below |
Add extra parameters to TINYMCEPLUGIN_INIT string for a specific _browser |
TINYMCEPLUGIN_DISABLE |
0 |
If set to 1, disables TinyMCEPlugin. Please use NOWYSIWYG instead |
NOWYSIWYG |
0 |
If this global setting is set to 1, TinyMCEPlugin (and all other WYSIWYG editors) will be disabled. |
TINYMCEPLUGIN_BAD_BROWSERS |
(?i-xsm:Konqueror) |
A regular expression that matches the user-agent string of any browser for which TinyMCE should not be loaded. |
TINYMCEPLUGIN_DEBUG |
0 |
If set to 1, the uncompressed version of TinyMCE Javascript and CSS sources will be loaded by the browser. Useful for debugging. |
Browser Specific Settings
Additional options may be set 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 : false
The defaults are:
MSIE => '',
OPERA => '',
GECKO => 'gecko_spellcheck : true',
SAFARI => '',
Additional TinyMCE Plugins
Documentation for standard plugins shipped with TinyMCE can be found at
http://wiki.moxiecode.com/index.php/TinyMCE:Plugins.
Some notable plugins:
Plugin Name |
Toolbar buttons |
Description |
Notes |
autoresize |
- |
Automatically resizes the editor to the content inside it |
|
emotions |
emotions |
Insert smiley images into the TinyMCE editable area |
|
iespell |
iespell |
Provides spell check for Internet Explorers |
|
insertdatetime |
insertdate, inserttime |
Provides buttons to insert customised date and time strings |
|
media |
media |
Handles embedded media such as QuickTime, Flash, ShockWave, RealPlayer and Windows Media Player |
Requires customisation of edit templates |
paste |
pastetext, pasteword, selectall |
Enabled by default in Foswiki |
Added here to show extra toolbar buttons that are available |
spellchecker |
spellchecker |
Adds spellchecker functionality to TinyMCE by providing a new button that performs a AJAX call to a backend PHP page that uses PSpell/ASpell or Google spellchecker |
|
style |
styleprops |
Adds CSS style editing support to TinyMCE, this will enable you to edit almost any CSS style property in a visual way. |
Generally, HTML/CSS markup in topics is not desirable |
visualchars |
visualchars |
Adds the possibility to see invisible characters like |
|
wordcount |
- |
Display the number of words down in the right corner of the editor. |
|
xhtmlxtras |
cite, ins, del, abbr, acronym |
Adds support for some XHTML elements, including cite, ins, del, abbr, and acronym. |
Generally, XHTML markup in topics is not desirable. Foswiki plugins exist to provide similar functions with more friendly TML markup |
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.
TinyMCEPlugin depends on
WysiwygPlugin to do the conversions from HTML to TML (Topic Markup Language) and back again. For more information, see
WysiwygPlugin.
WYSIWYG_EXCLUDE - Prevent WYSIWYG editing
This is not supported currently by the TinyMCE Editor. This setting is not used.
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.
WYSIWYG_EDITABLE_CALLS - Exceptions to WYSIWYG_EXCLUDE
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.
WYSIWYGPLUGIN_STICKYBITS - Protext 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 Foswiki | table | column |
markup.
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 = .*=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
- Applying formats such as Headings, Verbatim, Normal, etc:
- In Safari 4 and Google Chrome 3, selecting a format works but then the cursor is lost; subsequent changes require the user to first click the region to be formatted before each change.
- In some versions of Microsoft Internet Explorer 6, applying formats does not work:
- 6.0.2900.5512: Known to work.
- 6.0.2900.2180: Known to have problems.
- "Normal" format depends on WysiwygPlugin flattening
<div>
tags
Check regularly at
Foswiki:Extensions.TinyMCEPlugin for updates.
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.7 of the TinyMCE editor which is covered by its own license. |
Version: |
6527 (2010-02-26) |
Release: |
26 Feb 2010 |
Change History: |
|
19 Feb 2010 |
Foswikitask:Item8566: Fix for sites with latest JQueryPlugin where IE users get: "Unable to install TinyMCE; <META..." |
29 Dec 2009 |
Foswikitask:Item2447: Fix unable to apply "Normal" format in some browsers (notes added to System topic) Foswikitask:Item1462: Block attachments to unsaved AUTOINC topics |
25 Nov 2009 |
Foswikitask:Item2412: Inserting images - fixed a problem where it wasn't easy (impossible unless > 1 attachments) to select the first image in the attachment list; improved layout of dialog window where preview obscures insert/cancel buttons. |
09 Nov 2009 |
Foswikitask:Item2341: Added blockquote button and rearranged toolbars slightly; cleaned up System topic |
29 Oct 2009 |
Foswikitask:Item2245: Updated documentation, removed redundant setting: paste_auto_cleanup_on_paste : true for MSIE browsers (TinyMCE now defaults to true for all browsers) |
21 Oct 2009 |
Foswikitask:Item1558: TinyMCE project now supports Opera, so remove it from _BAD_BROWSERS |
18 Oct 2009 |
Foswikitask:Item2270: Fix wordcount plugin to show correct count when user first enters edit mode |
17 Oct 2009 |
Foswikitask:Item2245: Upgrade to TinyMCE 3.2.7 |
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: |
Foswiki:Extensions.TinyMCEPlugin |
Support: |
Foswiki:Support.TinyMCEPlugin |
Many thanks to the following sponsors for supporting this work: