ASAP Framework has a follow-up: go to ASAP Library for our AS3 framework!

TinyMCEPlugin

Integration of the TinyMCE WYSIWYG Editor

This is an integration of the TinyMCE 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 functions on normal topic text exactly like any other HTML editor. It uses a translator module to convert from TWiki markup language (TML) to HTML and back. The translator converts special TWiki tags - such as %<nopVARIABLES% - to plain text, and encloses it withn HTML span using a special style called WYSIWYG_PROTECTED. In this way the client 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 paint the PROTECTED style (from the styles menu) over those regions.

Installation Instructions

NOTE: this plugin requires the very latest revision of WysiwygPlugin. It will not work with the version shipped with TWiki 4.1.2.

First follow the installation instructions to install the Plugin:

%$INSTALL_INSTRUCTIONS%

  • Disable the WysiwygPlugin in configure, unless you also want to use another WYSIWYG editor by cicking the 'WYSIWYG' button.
  • Enable the TinyMCEPlugin in configure.
  • Click on edit of any topic.

Settings

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", debug : true, cleanup : false, theme : "advanced", convert_urls : true, relative_urls : false, remove_script_host : false, urlconverter_callback : "twikiConvertURL",
convert_fonts_to_spans
true, plugins : "table,searchreplace,autosave,paste,twikiimage", setupcontent_callback : "tinymce_plugin_setUpContent", twiki_vars : "PUBURLPATH=/wiki/pub,PUBURL=http://www.asapframework.org/wiki/pub,WEB=TWiki,TOPIC=TinyMCEPlugin,ATTACHURL=http://www.asapframework.org/wiki/pub/TWiki/TinyMCEPlugin,ATTACHURLPATH=/wiki/pub/TWiki/TinyMCEPlugin,VIEWSCRIPTURL=http://www.asapframework.org/wiki/bin/view", theme_advanced_toolbar_align : "left", 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", paste_insert_word_content_callback : "pasteWordContentCallback", theme_advanced_buttons1 : "bold,italic,separator,bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,search,replace,separator,link,unlink,removeformat,hr,separator,styleselect,formatselect,anchor,image,help,code,charmap",
theme_advanced_buttons2
"tablecontrols",
theme_advanced_buttons3
"",
theme_advanced_toolbar_location
"top", theme_advanced_styles : "NOAUTOLINK=WYSIWYG_NOAUTOLINK;VERBATIM=TMLverbatim;PROTECTED=WYSIWYG_PROTECTED", content_css : "/wiki/pub/TWiki/TinyMCEPlugin/wysiwyg.css,/wiki/pub/TWiki/TWikiTemplates/base.css,/wiki/pub/TWiki/PatternSkin/style.css,/wiki/pub/TWiki/PatternSkin/colors.css"
  • 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.

Plugin Info

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

Plugin Author(s): TWiki:Main.CrawfordCurrie
Plugin Version: %$VERSION%
Copyright: © 2007 Crawford Currie http://c-dot.co.uk
  This package also includes the complete sources for version 2.1.1.1 of the TinyMCE editor
License: GPL (Gnu General Public License)
Change History:  
7 Sep 2007 Bugs:Item4503 excess empty lines Bugs:Item4486 no toc headers with unofficial syntax Bugs:Item4560: empty lines lost Bugs:Item4566: corrupted table on save
6 Sep 2007 Bugs:Item4557 added missing files to package
4 Sep 2007 Bugs:Item4534 Bugs:Item4535 fixed
14679 Bugs:Item4481 Bugs: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: %$DEPENDENCIES%
Plugin Home: http://twiki.org/cgi-bin/view/Plugins/TinyMCEPlugin
Feedback: http://twiki.org/cgi-bin/view/Plugins/TinyMCEPluginDev
Appraisal: http://twiki.org/cgi-bin/view/Plugins/TinyMCEPluginAppraisal

Many thanks to the following sponsors for supporting this work:

Topic revision: r1 - 08 Sep 2007 - 16:54:48 - TWikiGuest
 
This site is powered by the TWiki collaboration platformCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding ASAP? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.TinyMCEPlugin