finally a good WYSIWYG editor for DokuWiki

While I myself really like the Wiki Syntax that DokuWiki uses and am perfectly happy with the raw text editor supplied with DokuWiki, i have some colleagues at work who shy away from using our Wiki because they struggle to get used to the Syntax or to using Text formatting syntax in general i should say. So every now and then I look around for a WYSIWYG editor that would be suitable for others to edit our wiki.

there are many WYSIWYG editor plug-ins for DokuWiki avaialble, but they all share the same problem: they are actually HTML editors behind the scenes and then convert HTML to Wiki Syntax which scares me. I fear that one way or another, such editors will mess up pages that i have written in a nice wiki syntax in a way that either the wiki source code is unusable or even worse, that some things may even get lost, because one of the two converters does not understand a tag from a plug-in or whatever. So i never really pushed the use of such a WYSIWYG editor forward, because i was simply too afraid. I think they probably work well as long as you only use WYSIWYG but if people like me like to continue to work in text only mode that's a no-go for me.

That's where ProseMirror Plug-In comes in. It adds a WYSIWYG editor which creates and understands native DokuWiki syntax. So while you write your wiki page, you can switch forth and back between Wiki syntax source and WYSIWYG editor and there is no converting from or to HTML.

The ProseMirror WYSIWYG editor in Action, click to enlarge

Paste images from Clipboard

Another Plug-In from the same Author (CosmoCode) that comes in really handy is ImgPaste which allows to paste an image (i.e. a screenshot) from the clipboard directly into the Editor. Amazingly this plug-in is actually meant to be used with the plain text editor, but recently someone has posted a pull request which adds compatibility to ProseMirror as well. Unfortunately the pull request has not been merged yet (on Nov. 11, 2020) so we have to apply the patch manually:

  1. install the ImgPaste plug-in via your extensions manager
  2. on your server, navigate to the dokuwiki_dir/plugins/imgpaste directory
  3. download the patched version i.e. using wget: 
    wget https://raw.githubusercontent.com/cosmocode/dokuwiki-plugin-imgpaste/57780240370e8d8be528a6b16211f1fe7edadcc6/script.js
  4. copy/paste your images to the WYSIWYG editor or the text editor :)