TinyMCEPlugin
Integration of the TinyMCE 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
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 4.2.0. 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:
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 where TWiki is running.
Like many other TWiki extensions, this module is shipped with a fully
automatic installer script written using the BuildContrib.
- If you have TWiki 4.2 or later, you can install from the
configure
interface (Go to Plugins->Find More Extensions)
- If you have any problems, then you can still install manually from the command-line:
- Download one of the
.zip
or .tgz
archives
- Unpack the archive in the root directory of your TWiki installation.
- Run the installer script (
perl <module>_installer
)
- Run
configure
and enable the module, if it is a plugin.
- Repeat for any missing dependencies.
- If you are still having problems, then instead of running the installer script:
- Make sure that the file permissions allow the webserver user to access all files.
- Check in any installed files that have existing
,v
files in your existing install (take care not to lock the files when you check in)
- Manually edit LocalSite.cfg to set any configuration variables.
Settings
You can override this setting by defining TINYMCEPLUGIN_DEBUG to enable some simple debug features.
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 : "exact",
save_on_tinymce_forms: true,
elements : "text",
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%/%TWIKIWEB%/TinyMCEPlugin/wysiwyg%IF{"$TINYMCEPLUGIN_DEBUG" then="_src"}%.css,%PUBURLPATH%/%TWIKIWEB%/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
variable to 1.
- 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)
.
The
global TWiki Variable
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
-
variables
- simple variables (e.g. %VAR%
) or
-
calls
- TWiki variables with parameters e.g. %VARIABLE{...}%
-
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 TWiki variables that do
not block edits. this is done in the
global TWiki variable
WYSIWYG_EDITABLE_CALLS
, which should be a list of TWiki 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.
You can define the global variable
WYSIWYGPLUGIN_STICKYBITS
to stop the
plugin from ever trying to convert specific HTML tags into
HTML 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 variable 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 variable 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.
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
Another great TWiki extension from the
WikiRing - working together to improve your wiki experience!
Many thanks to the following sponsors for supporting this work: