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.
Comments
11 Responses to “Integrate FCKEditor in Dokuwiki”
Leave a Reply
You must be logged in to post a comment.

Oups, I removed your comment while deleting spam …
So, the question was how did I convert the site.
Actually, I make this on a fresh Dokuwiki install, so I didn’t convert anything. If you want to do so, I think you’ll avec to convert all pages from Wiki format to HTML, and then add <html> tags in the file.
Nice post, any known bugs with this approach? Would you have a demo available?
Thanks
Hi Peter. I didn’t notice any bugs at the moment, and it works fine to manage images. Yet, I don’t have any demo for this. But tell me if you need to setup one and have some difficulties.
Cheers
Nice TIP but, can i use <code> tag or other syntax tag?
Hi, thank you for your tutorial. The FCKEditor works very fine in my dokuwiki. But there is one problem: After setup the FCKEditor the TOC doesn’t appear on my pages. What can I do?
In $BASE/inc/html.php delete/comment the following line (l.1023), to remove the original JS editor:
i dont see this line? am i blind, mine goes to line 946.. i have the latest version
Any changes inherent to the latest version of DocuWiki? (11/06)
I don’t know, as I didn’t upgrade my DokuWiki install that uses this hack.
But if you find something different, you could create a page on Dokuwiki and paste a link here so that people know what’s need to be changed, thanks.
Hi, Thanks for your help, but the editor is not running with my Dokuwiki.
Do you have idea ?
Not work with dokuwiki-rc2007-05-24
Hi,
Sorry but I won’t have to upgrade it, I don’t have projects using dokuwiki currently.
Yet, if one of you can make it, you’re welcome to create a page on the documentation wiki of dokuwiki, with installation details.