Integrate FCKEditor in Dokuwiki
Dokuwiki is a nice wiki application, easy to setup, and with a lot of plugins (notes, LaTeX rendering …). It features a tiny javascript editor in order to publish pages without knowledge of its wiki syntax. Yet, some users would certainly like a more advanced WYSIWYG editor, especially for handling images upload and positioning.
So, here’s a quick tutorial to embed FCKeditor[1], a GPL-ed WYSIWYG XHTML-compliant editor, in Dokuwiki[2].
First, setup FCK as the default DokuWiki editor:
- Copy the unpackaged FCK archive folder to
$BASE/lib/scripts/[3]; - We’ll use the textarea replacement method to embed FCK. So open
$BASE/inc/template.phpand, after line 218, add the following instructions:
ptln('<script type="text/javascript" charset="utf-8" src="'. DOKU_BASE.'lib/scripts/FCKeditor/fckeditor.js"></script>',$it); ptln('<script type="text/javascript" charset="utf-8">window.onload = function() '. '{ var fck = new FCKeditor("wiki__text", "100%", "600"); fck.BasePath = "'. DOKU_BASE.'lib/scripts/FCKeditor/"; fck.ReplaceTextarea(); }</script>');
where “100%” and “600″ are the editor width and height;
- In
$BASE/inc/html.phpdelete/comment the following line (l.1023), to remove the original JS editor:
<div id="size__ctl"></div>
- You should also edit
$BASE/lib/scripts/FCKeditor/fckeditor.jsand remove the following line (l.92), or FCK will complain he can’t find a textarea in the front-end pages:
alert( 'Error: The TEXTAREA with id or name set to "' + this.InstanceName + '" was not found' ) ;
Then, we need to tell DokuWiki that pages are now written in HTML, and not using its wiki syntax:
- The first thing to do is to set
$conf['htmlok'] = 1;in$BASE/conf/dokuwiki.conf(orlocal.phpif you created one); - Next, you’ll have to open
$BASE/inc/common.phpand replace the line (l. 840)
io_saveFile($file, $text);
by
io_saveFile($file, "<html>$text</html>");
so that it will save content between <html> tags, telling Dokuwiki we’re embedding HTML;
- Open
$BASE/inc/html.phpand, @ line 277, replace
p_render('xhtml',p_get_instructions($txt),$info)
by
p_render('xhtml',p_get_instructions("<html>$txt</html>"),$info)
so that the preview text will be also interpreted as HTML.
One of the bast feature of FCK is its images/files upload management. If you want to enable it:
- In
$BASE/lib/scripts/FCKEditor/fckconfig.js, set_FileBrowserLanguageand_QuickUploadLanguagevalues tophp(l. 134). - You’ll also need to edit (
$BASE/lib/scripts/FCKeditor/editor/filemanager/browser/default/connectors/php/config.phpand)$BASE/lib/scripts/FCKeditor/editor/filemanager/upload/php/config.phpto set$Config['UserFilesPath']to an upload directory relative to your website root (and create + chown it so that webserver can upload files), and set$Config['Enabled'] = true;.
That’s all, you’ve got FCKeditor running in your wiki.
At least, if want to get an easy way to create internal links (and so, new pages), you should add a rewrite rule to make your wiki interpret links like foo as index.php?id=foo. Using it, you’ll be able to create new pages using the FCK link editor, by adding a link with no protocol and just a page name.
Notes
[1] I first choosed TinyMCE, until I discovered its images management plugin wasn’t free, while FCK’s one is.
[2] Using with DokuWiki v2006-03-09 and FCKeditor v2.3.
[3] $BASE is supposed to be the DokuWiki install path on your server.
-
Current highlights
