JSPWiki: How To Add TinyMCE to the Haddock Template

This page describes how to integrate TinyMCE with the Haddock Template.

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL.

Handle with care : WYSIWYG integration in JSPWiki has its limitations. Some html-to-wiki markup translation is not obvious such as plugin syntax, ACL, and other wiki markup.

See also WYSIWYG editor ,TinyMCE, CKeditor

Step 1 : Download TinyMCE#

Go to the TinyMCE Download page
Select the Download button of the TinyMCE Community package.
Extract the tinymce_5.0.6.zip into your $JSPWiki_Home/scripts/ directory.
This should overwrite the existing scripts/tinymce subdirectory.

You can also download the languages you want to have support for:

Go to the TinyMCE Language page
Select the needed languages
Download the tinymce_languages.zip file, and unzip the contents to your $JSPWiki_Home/scripts/tinymce/langs directory. /

Alternative: TinyMCE from CDN#

Instead of downloading the TinyMCE you can chose to use a CDN instead, which could also help to speed up your website.

Make sure to update $JSPWiki_Home/templates/<template-dir>/editor/TinyMCE.jsp

/* local download of TinyMCE 
TemplateManager.addResourceRequest( context, TemplateManager.RESOURCE_SCRIPT,
           context.getURL( WikiContext.NONE, "scripts/tinymce/tinymce.min.js" ) );
*/
/* Use TinyMCE from a CDN */
TemplateManager.addResourceRequest( context, TemplateManager.RESOURCE_SCRIPT,
           "//https://cloud.tinymce.com/5/tinymce.min.js" );

Step 2: Build & Deploy TinyMCE.jar#

The TinyMCE.jar contains the JSPWiki module definitions. This is needed for JSPWiki to recognize the editor, and add a Editor dropdown list to the UserPreferences page. Create a directory with following structure, and create the jspwiki_module.xml file.

/TinyMCE
    /ini
        jspwiki_module.xml

<?xml version="1.0" encoding="UTF-8"?>
<modules>
   <editor name="TinyMCE">
      <author>brushed</author>
      <path>editors/TinyMCE.jsp</path>
      <minVersion>2.10.2</minVersion>
   </editor>
</modules>

Now generate TinyMCE.jar or download the file attached to this page and place it in your $JSPWiki_Home/WEB-INF/lib/ directory.

$$> jar cvf TinyMCE.jar ini
added manifest
adding: ini/(in = 0) (out= 0)(stored 0%)
adding: ini/jspwiki_module.xml(in = 208) (out= 143)(deflated 31%)

You can check the contents of the jar like so:

$$> jar tf TinyMCE.jar
META-INF/
META-INF/MANIFEST.MF
ini/
ini/jspwiki_module.xml

Step 3: Restart JSPWiki#

That's it!
Go ahead and (re)start JSPWiki and you should see TinyMCE as an option on the Editor dropdown list found in the UserPreferences.