JSPWiki: How To Add CKEditor 4.0 to the Haddock Template

This page describes how to manually integrate the wysiwyg CKEditor

with the Haddock Template.

CKEditor is distributed under the GPL

, LGPL

and MPL

Open Source licenses.

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. Enhance your website experience with our community maintained editor.

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.

Download CKEditor#

Go to the CKeditor builder page
Select the standard preset, containing the most essential plugins.
Select the BootstrapCK4 skin. Optional, but fitting with the Bootstrap style of the Haddock Template.
Select the languages (default includes english)
Select the optimized radio-button and DOWNLOAD the latest stable version, v 4.5.1. as of this writing.
Extract the zip file into your $JSPWiki_Home/scripts/ directory.
This should overwrite the existing ckeditor subdirectory.

CKEditor from CDN#

Instead of downloading the CKeditor you can chose to use a CDN instead, which could also help to speed up your website. (see cdn.ckeditor.com

)

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

/* local download of CKeditor 
TemplateManager.addResourceRequest( context, TemplateManager.RESOURCE_SCRIPT,
           context.getURL( WikiContext.NONE, "scripts/ckeditor/ckeditor.js" ) );
*/
/* Use CKEditor from a CDN */
TemplateManager.addResourceRequest( context, TemplateManager.RESOURCE_SCRIPT,
           "//cdn.ckeditor.com/4.5.1/standard/ckeditor.js" );

Build & Deploy CKeditor.jar#

The CKeditor.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.

/CKeditor
    /ini
        jspwiki_module.xml

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

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

$$> jar cvf CKeditor.jar ini
added manifest
adding: ini/(in = 0) (out= 0)(stored 0%)
adding: ini/jspwiki_module.xml(in = 306) (out= 201)(deflated 34%)

You can check the contents of the jar like so:

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

Restart JSPWiki#

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