|
|
||||||||||||||||||||||||||||||||
TinyMCEPluginIntegration of the TinyMCE WYSIWYG Editor
On this page:
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 NotesThe 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 calledWYSIWYG_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 InstructionsNOTES:
SettingsYou can override this setting by defining TINYMCEPLUGIN_DEBUG to enable some simple debug features.
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%/%TWIKIWEB%/TinyMCEPlugin/wysiwyg%IF{"$TINYMCEPLUGIN_DEBUG" then="_src"}%.css,%PUBURLPATH%/%TWIKIWEB%/TWikiTemplates/base.css,%TWIKISTYLEURL%,%TWIKICOLORSURL%"
TINYMCEPLUGIN_INIT in the site, web or topic preferences. You are not recommended to edit the setting here.
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:
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.0When 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
| ||||||||||||||||||||||||||||||||