Debian Ubuntu Linux Solutions Blog

Purpose: A common complain from a lot of non-technical mediawiki users is the lack of WYSIWYG (What You See Is What You Get) editor. This basically means that user does not get to see in the final wiki page what they type in the “Edit” wiki page. There are various options to get a WYSIWYG editor for mediawiki (like MCE, TinyMCE, FCKeditor). However we will focus here on the FCKeditor which seems to be quite popular.

Note that this editor is not a standard component (yet) of the mediawiki project. So there is certain element of risk involved once you decide to integrate this. However I think it is worth the risk. You can always disable the FCKeditor with few commands later if you see lot of problems.

Step 1: Install mediawiki

Of course we are assuming here that you already have installed mediawiki on your Debian Lenny system. If you have not done it yet, then see this post on how to do it.

Step 2: Install the FCKeditor extension

As mentioned before, all additional features in mediawiki are achieved using extensions. So let’s go ahead and install the extensions.

# apt-get install websvn
# cd /var/lib/mediawiki/extensions
# svn checkout http://svn.fckeditor.net/MediaWiki/trunk FCKeditor

Yes, we are checking out code directly from the SVN repository. Apparently the downloads mention on this page did not work for me. However as per the integration guide, you can checkout the SVN code directly although it is not recommended for a production system.

The above command will create a directory called “FCKeditor” like this:

# ls /var/lib/mediawiki/extensions/

Output:

CategoryTree  embed_document.php  FCKeditor  README

Step 3: Install the actual FCKeditor

Since we have already installed the extension in Step 2, we now just need to install the real FCKeditor into our mediawiki directory so that we can start using it.

# cd /var/lib/mediawiki/extensions/FCKeditor
# svn checkout http://svn.fckeditor.net/FCKeditor/trunk fckeditor

Check to see your directory structure after Step 2 and Step 3.

# ls /var/lib/mediawiki/extensions/FCKeditor

Output:

css                         FCKeditor.i18n.pl.php
fckeditor                   FCKeditor.i18n.pms.php
FCKeditor.body.php          FCKeditor.i18n.pt.php
fckeditor_config.js         FCKeditor.i18n.sk.php
FCKeditorEditPage.body.php  FCKeditor.i18n.sv.php
FCKeditor.i18n.ar.php       FCKeditor.i18n.zh-tw.php
FCKeditor.i18n.de.php       FCKeditorParser.body.php
FCKeditor.i18n.en.php       FCKeditorParserOptions.body.php
FCKeditor.i18n.es.php       FCKeditor.php
FCKeditor.i18n.fa.php       FCKeditor.php~
FCKeditor.i18n.fr.php       FCKeditor.popup.html
FCKeditor.i18n.gl.php       FCKeditorSajax.body.php
FCKeditor.i18n.he.php       FCKeditorSkin.body.php
FCKeditor.i18n.hsb.php      mw11
FCKeditor.i18n.ko.php       mw12
FCKeditor.i18n.nl.php       mw14
FCKeditor.i18n.no.php       plugins
FCKeditor.i18n.oc.php

# ls /var/lib/mediawiki/extensions/FCKeditor/fckeditor

Output:

_dev                 fckeditor.lasso     fckutils.cfm
_documentation.html  fckeditor.php       license.txt
editor               fckeditor_php4.php  _samples
fckconfig.js         fckeditor_php5.php  _test
fckeditor.afp        fckeditor.pl        _testcases
fckeditor.asp        fckeditor.py        _upgrade.html
fckeditor.cfc        fckpackager.xml     _whatsnew_history.html
fckeditor.cfm        fckstyles.xml       _whatsnew.html
fckeditor.js         fcktemplates.xml

Step 4: Enable the extensions

Once you confirm that you have done the above steps right you can now enable the WYSIWYG FCKeditor extension by editing the following file:

# nano /etc/mediawiki/LocalSettings.php

and add the following line towards the end of the file:

$wgUseAjax = 'true';
require_once( "$IP/extensions/FCKeditor/FCKeditor.php" );
$wgFCKEditorToolbarSet   = "Wiki";

Save and quit the file.

Step 5: Test the WYSIWYG editor

Now let’s check to see if really are getting the FCKeditor or not when we edit or wiki page. Go to a any existing wiki page and click “Edit” tab and you should be able to see the following two options (circled in red):

FCKeditor mediawiki extension

Now click on “Rich Editor” link and you should be on your way to start using the FCKeditor:

mediawiki FCKeditor

Step 6: Cannot see the FCKeditor?

If for some reasons you cannot see the editor as shown above, then try making changes to the two files mentioned here.

That’s it! You are on your way to use a WYSIWYG FCKeditor in your mediawiki.

I would really appreciate if you can report your results – Success or Failure – after following the instructions in this post.

Happy WYSIWYG’ing!

Be Sociable, Share!

•