I was thinking of creating an internal information sharing service using a Wiki. However, considering that non-developers would also be using it, I thought it would be best to have one with a WYSIWYG editor.

When taking work notes, I often save screenshots in Evernote, and I believe that kind of user experience is the best.

WordPress is quite close to what I need, but I wanted something even closer to a Wiki. After some research, I found that MediaWiki's recently introduced (as of July 2003) VisualEditor plugin seemed like a good fit, so I decided to install it.

1. Results

I thought it would be difficult to place it within authenticated pages on the internet, so I gave up on that.

MediaWiki requires PHP 5.3.2 or higher.
To run the Parsoid server needed for VisualEditor, Node.js 0.8 is required. It does not work with 0.10 (unchecked, according to the official website).

2. Installation Method

2-1. Installing MediaWiki

As of July 31, 2013, you can download version 1.21.1 from the official MediaWiki site http://www.mediawiki.org/wiki/Download, but VisualEditor does not work with this version. Therefore, I cloned the latest 1.22 alpha from the Git repository.

Let's install it in a directory named "mediawiki" within the web public directory.

$ git clone --depth 1 https://gerrit.wikimedia.org/r/p/mediawiki/core.git mediawiki

Since no extensions are included, I added those that I might use, including VisualEditor and Parsoid. You can write and execute a shell script for this.

cd mediawiki/extensions/

git clone --depth 1 https://git.wikimedia.org/git/mediawiki/extensions/VisualEditor.git
git clone --depth 1 https://git.wikimedia.org/git/mediawiki/extensions/Parsoid.git
git clone --depth 1 https://git.wikimedia.org/git/mediawiki/extensions/SyntaxHighlight_GeSHi.git
git clone --depth 1 https://git.wikimedia.org/git/mediawiki/extensions/PdfHandler.git
git clone --depth 1 https://git.wikimedia.org/git/mediawiki/extensions/Gadgets.git
git clone --depth 1 https://git.wikimedia.org/git/mediawiki/extensions/WikiEditor.git
git clone --depth 1 https://git.wikimedia.org/git/mediawiki/extensions/InputBox.git

Access http://xxxx/mediawiki/, follow the installer steps, and make sure you can see the top page. During the process, check all the boxes for the extensions you want to use.

/media/photo/20130803-mediawiki/2013-07-31_14.06.02.png

Log in to MediaWiki, check "Enable VisualEditor" in the personal settings, and when you display the page again, a "Edit Source" tab appears next to the "Edit" tab. This means VisualEditor is enabled.

/media/photo/20130803-mediawiki/2013-07-31_14.07.36.png

/media/photo/20130803-mediawiki/2013-07-31_14.08.01.png

However, since the Parsoid service is not running, an error will be displayed when you press the edit button.

2-2. Installing Node.js 0.8

2-2-a. For mac + homebrew

The latest version of Node.js in homebrew is 0.10x, which is too new. We need to install the older 0.8 version.

$ brew versions nodejs
0.8.22   git checkout 3c4a714 /usr/local/Library/Formula/node.rb

$ cd /usr/local/Library/Formula
$ git checkout 3c4a714 /usr/local/Library/Formula/node.rb
$ brew install nodejs

$ node -v
v0.8.22

It's installed.

2-2-b. For CentOS 5.9

We will compile from source.

Install build tools with

$ sudo yum groupinstall 'Development Tools'

You will need python2.6 for make, but CentOS 5.x comes with python2.4 by default. So, we need to install python2.6 first.

$ sudo yum install python26

Switch the default python to python2.6. I wasn't sure how to do it with yum, so I renamed the binary files.

$ which python
/usr/bin/python
$ cd /usr/bin
$ sudo rm python # The same binary as python2.4, so remove it
$ sudo ln -s python26 python
$ python
Python 2.6.8 (unknown, Nov  7 2012, 14:47:45)

$ cd working_directory
$ curl -O http://nodejs.org/dist/v0.8.25/node-v0.8.25.tar.gz
$ tar -zxvf node-v0.8.25.tar.gz
$ cd node-v0.8.25
$ ./configure
$ make
$ sudo make install

(After the work, revert the symbolic link to avoid breaking yum: sudo rm python; sudo ln -s python2.4 python)

2-3. Starting the Parsoid Service

Edit the configuration file to include the MediaWiki URL (〜/mediawiki/)

$ cd web_public_directory/mediawiki/extensions/Parsoid/js/api/
$ cp localsettings.js.example localsettings.js
$ vim localsettings.js

Edit it like this:

//parsoidConfig.setInterwiki( 'localhost', 'http://localhost/w/api.php' );
parsoidConfig.setInterwiki( 'localhost', 'http://localhost/mediawiki/api.php' );

$ cd some_directory/mediawiki/extensions/Parsoid/js
$ npm install
$ node api/server.js

By default, it listens on port 8000.

The port number can be set with the environment variable process.env.VCAP_APP_PORT || 8000.

Verify it works by accessing http://localhost:8000/ with a browser or curl.

/media/photo/20130803-mediawiki/2013-07-31_14.12.24.png

(By the way, I prefer 127.0.0.1 over localhost)

There is a provisional script for starting Parsoid in extensions/Parsoid/js/api/runserver.sh, but

# kill a running server (crude version..)
killall -9 node

This is a bit scary.

If the Parsoid server is running, VisualEditor will be usable.

3. Issues

The mechanism involves HTTP access from the browser to the Wiki server's :8000 via JavaScript, and the Parsoid service on the Wiki server makes HTTP access to localhost.

This is fine for public servers, but if you're using authentication (like BASIC authentication), it gets a bit tricky.

What kind of authentication should be applied to :8000 listening on the server?
Can Parsoid avoid authentication when accessing localhost on port 80?

Due to these security concerns, I passed on using it for this purpose.

However, it's very convenient, so I recommend it for public Wikis or internal server machines where security is not a concern.

One possible approach could be enabling VisualEditor on local or internal servers and not enabling it on authenticated internet servers, while sharing (synchronizing) the database content in some way.

Appendix 1: Displaying External Images in MediaWiki

LocalSettings.php

$wgAllowExternalImages = true;

Appendix 2: Removing index.php from URLs

By default, URLs are in the form http://127.0.0.1/mediawiki/index.php/Main_Page. Change it to http://127.0.0.1/mediawiki/wiki/Main_Page.

LocalSettings.php

$wgArticlePath = "$wgScriptPath/wiki/$1";

.htaccess

RewriteEngine on
RewriteRule ^wiki/(.*)$ /mediawiki/index.php?title=$1 [PT,L,QSA]

By the way, if MediaWiki is installed in mediawiki/, it's not difficult to change the article page to http://127.0.0.1/wiki/Main_Page, but it's quite difficult to change it to http://127.0.0.1/mediawiki/Main_Page.