Dies ist eine alte Version des Dokuments!

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.php and, 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.php delete/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.js and 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 (or local.php if you created one);
  • Next, you’ll have to open $BASE/inc/common.php and replace the line (l. 840)
io_saveFile($file, $text);


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.php and, @ line 277, replace



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 _FileBrowserLanguage and _QuickUploadLanguage values to php (l. 134).
  • You’ll also need to edit ($BASE/lib/scripts/FCKeditor/editor/filemanager/browser/default/connectors/php/config.php and) $BASE/lib/scripts/FCKeditor/editor/filemanager/upload/php/config.php to 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.


[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.

Datenschutzerklärung   Letzte Aktualisierung: 04.03.2017 18:17