TinyMCE is a WYSIWYG editor (or called rich text editor) similar in concept to FCKEditor and htmlArea, for those who want the richness of the editor and don't mind losing the simplicity and control that standard Wiki markup allows. My experience in integrating it with JSPWiki was painless and quick.

My environment:

The basic process is:

  • Download the scripts
  • Place the scripts in the proper folder
  • Modify the Editor JSP file with two lines of Javascript code.

Download the scripts#

Go to the TinyMCE download page and, um, download em and extract em.

Place the scripts in the proper folder#

After you extract the contents of the zip file, you'll have a folder structrue that starts like this:
\tinymce
\tinymce\docs
\tinymce\examples
\tinymce\jscripts

Place the whole thing in your <JSPWiki-root>\scripts folder, so you'll have:

<JSPWiki-root>\scripts\tinymce
<JSPWiki-root>\scripts\tinymce\docs
<JSPWiki-root>\scripts\tinymce\examples
<JSPWiki-root>\scripts\tinymce\jscripts

Modify the appropriate editor JSP file#

You need to modify the JSP file that has the editor <textarea> in it. I don't know if it's the same thing in all the templates, but in the Media Wiki template, it's EditTemplate.jsp.

Add the following lines to the JSP file, somewhere between the <head> and </head> elements:

<script language="javascript" type="text/javascript" src="<JSPWiki-root>/scripts/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
	mode : "textareas"
});
</script>

Done!#

That's it. Run it and it should work. There are all kinds of ways to configure it.

Tradeoffs#

  • Most JSPWiki markup will not work.
    • * will not create bullets
    • # will not create numbered lists
    • and so on
    • But that's what the WYSYWIG editor is for!
  • Plugins appear to not work
  • But most important for JSPWiki markup, using [brackets] to indicate links, does work.
  • Linking from one page to an anchor in another page requires a little extra work
    • Using the tinyMCE editor, create an anchor on the page you're linking to (an anchor can be anywhere on the page and named anything, you're not restricted to the headers).
    • Name the anchor section-<pageName>-<anchorName>, where <pageName> is the Wiki name of the page you're currently on, and <anchorName> is whatever you want to name the anchor.
    • Go to the page you want to link from. Insert the link as follows [Name to show|<pageName>#<anchorName>], where <pageName> is the Wiki name of the page you're linking to, and <anchorName> is the name of the anchor you created on that page.

Since I did this all late last night, that's all I have so far. But it seems to work great.


Integrating FCKEditor is much easier - see comment for HowToManuallyIntegrateFCKEditor

--AnonymousCoward, 29-Jun-2006


Well, apparently, your comments refer to JSPWiki 2.4+, but I'm using 2.2.33.

--David Uctaa, 30-Jun-2006


David, instructions for getting TinyMCE working in JSPWiki 2.4+ with the default template would be very helpful.

-- 1-Nov-2006


I would also very much like to have a WYSIWYG editor available in JSPWiki. In our shop many people just don't want to start documenting in wiki syntax. The acceptance of JSPWiki would be greatly improved if a WYSIWYG editor would be available beside the wiki editor. According to the tinyMCE docs, implementation is fairly easy in general. I cannot however comment on the implementation effort for JSPWiki since I'm not JSP expert.

--HarryMetske, 09-Nov-2006


I followed the instructions and got it to work on 2.4 with media wiki but the problem is that after I edit a page all the HTML tags appear. It seems like somehow the tags are being escaped. The actual text files are getting HTML syntax in them rather than wiki syntax. Any ideas?

--scitronpousty, 13-Mar-2007


scitronpousty - I haven't tried TinyMCE integration yet, but I think the issue you're having is due to the jspwiki.translatorReader.allowHTML option in the jspwiki.properties file. Setting this option to true may help with the issue. Also be sure to read the warning too.

--David Au, 13-Mar-2007


Thanks David, that was the trick and since this is on an intranet site it is ok to allow HTML. The problem is that TinyMCE is really for html authoring, not wiki authoring. So when you put in a link to another page it doesn't really work right. I am not going to reccomend this for wiki pages at this time.

--scitronpousty, 13-Mar-2007


I am trying to integrate FCK editor and tinyMCE to JSPWiki 2.5.51. I followed the instructions on "How To Manually Integrate FCK Editor" page and tinyMCE integration page. For FCK I tried proper downloading and replacing scripts directory and then added &editor=FCK. The editor area is not displayed.

Tried instructions on "Tiny MCE Integration Instructions"(I know these instructions are for older version of JSPWiki) page and it doesn't work. The editor area uses plain editor.

Also, tried to replace JSPWiki_module.xml with FCK and TinyMCE editor options, that doesn't work either. Only plain and WikiWizard options can be seen. I know there is a warning with WYSIWYG editors and 2.5.x versions of JSPWiki. Just curious if anybody had these problems and how you resolved it.

Any help would be appreciated. Thanks.

--Roopa, 21-May-2007


I am trying to integrate FCK editor and tinyMCE to JSPWiki 2.5.51. I followed the instructions on "How To Manually Integrate FCK Editor" page and tinyMCE integration page. For FCK I tried downloading and replacing scripts directory and then added &editor=FCK. The editor area is not displayed.

Tried instructions on "Tiny MCE Integration Instructions" page (I know these are for an older version of JSPWiki) and it doesn't work. The editor area still uses plain editor.

Also, tried adding jspwiki_module.xml with FCK and TinyMCE editor options, that doesn't work either. Only plain and WikiWizard options can be seen. I know there is a warning with WYSIWYG editors and 2.5.x versions of JSPWiki. Just curious if anybody had these problems and how you resolved it.

Any help would be appreciated. Thanks.

--Roopa, 21-May-2007


Roopa,

I installed the FCK editor without any major problem :

  • download JSPWiki 2.5.58-cvs
  • add an entry to jspwiki_module.xml
  • build with the default supplied ant
  • add xercesImpl.jar to JSPWiki's WEB-INF/lib directory
  • download the latest FCK and extract it to JSPWiki's script directory (overwriting the existing fckeditor directory)
  • recycle tomcat (version 6.0.2, JDK 1.5)
  • all works fine

--HarryMetske, 21-May-2007


Harry

Thanks for the feedback. Had problem with fckeditor.js. Got it fixed. I have all patches downloaded and added. The Editors dropdown menu doesnot work. Have the right jspwiki_module.xml also. The menu is empty. FCK editor works if I put &editor=FCK in URL. Any idea what's happening?

Tomcat:5.5.23 JDK:1.5 The only difference is I have replaced fckeditor directory with fck editor files and then building the jspwiki source and adding it to the Webapps directory of tomcat.

Thanks

--Roopa, 21-May-2007


Roopa,

I've seen the empty editor list issue myself and found that it only happens when I "reload" the JSPWiki webapp using an ant task. Completely stopping Tomcat and starting it again will bring the editor selections back.

I also wanted to note that if you are using the latest CVS version, then you won't need the patched files from the WysiwygEditingPatch page (except for jspwiki_module.xml).

The only other cause I can think of is that you have a bad jspwiki_module.xml file. For instance, if you have edited the file yourself instead of using the one supplied from the WysiwygEditingPatch page, then be sure that you have properly saved the xml file using UTF-8 encoding.

--David Au, 22-May-2007


Hmmm..I just look at my jspwiki_module.xml file, found out that it's in ANSI and the editor list works fine, so I'm probably wrong about the the UTF-8 encoding part.

You might want to check your jspwiki.log file or the Tomcat logs to get some clues though.

--David Au, 22-May-2007


David, Restarting Tomcat fixed the problem. You're right. jspwiki_module.xml is not the problem since I edited it instead of copying. Thanks for your help.

--Roopa, 22-May-2007

Add new attachment

Only authorized users are allowed to upload new attachments.
« This page (revision-25) was last changed on 11-Feb-2009 07:33 by Kevin Yuen