Mediawiki Docker Image with Visual Editor

Lately our developers have been testing Mediawiki as a wiki solution to track project progress, retrospectives, meeting notes and internal intranet solution.

Here we love to containerize every application we lay our hands on and this was no exception.We went ahead and fetched the latest official docker image and started playing with it, our first note was that the Visual Editor plug in was not included , for developers and tech geeks this is not an issue, we write markdown syntax in our emails (ok, we don't ), but for non-technical users markdown is alien language.

Visual Editor requires Parsoid (a node application) to be installed so it can work. In this article we will show you how we built a custom MediaWiki docker with visual editor in a single container. You can checkout the source files on github

We will be using PHP Alpine Linux as a base image, obviously this will be our first line
FROM php:7.1.11-fpm-alpine3.4
Then we will add the dependencies that we will use: Python, NodeJS,Nginx & git
# Supervisord Vars

# install dependencies via apk
RUN apk update && apk add -u python=$PYTHON_VERSION py-pip=$PY_PIP_VERSION libpng-dev nginx git nodejs
Now, we will install Supervisord, a process control system, to hack docker to run multiple services (Note: This is for development purpose only, for production use separate containers and use docker compose)
RUN pip install supervisor==$SUPERVISOR_VERSION
and then install some PHP extensions required by MediaWiki (Note, I created an additional folder /var/www/data if you chose to use SQLite)
RUN docker-php-ext-install mysqli json mbstring gd
After this, we need to download MediaWiki + install Visual Editor plugin
# download MEDIAWIKI
RUN curl -fSL "${MEDIAWIKI_MAJOR_VERSION}/mediawiki-${MEDIAWIKI_VERSION}.tar.gz" -o mediawiki.tar.gz \
 && echo "${MEDIAWIKI_SHA512} *mediawiki.tar.gz" | sha512sum -c - \
 && tar -xz --strip-components=1 -f mediawiki.tar.gz \
 && rm mediawiki.tar.gz \
 && chown -R www-data:www-data extensions skins cache images
 RUN mkdir /var/www/data && chown www-data:www-data /var/www/data
RUN cd extensions \
 && wget \
&& tar -xzf VisualEditor-REL1_29-b655946.tar.gz
For the Visual Editor to run, we will need to install Parsoid
RUN npm install -g parsoid && cp /usr/lib/node_modules/parsoid/config.example.yaml /usr/lib/node_modules/parsoid/config.yaml
Then add custom Nginx & Supervisord configuration files and start Supervisrod in the foreground
ADD server-templates/nginx.conf /etc/nginx
ADD server-templates/supervisord.conf /etc/supervisor/conf.d/supervisord.conf

ENTRYPOINT ["supervisord", "--nodaemon", "--configuration", "/etc/supervisor/conf.d/supervisord.conf"]

Finally, we run the container
docker run --name mywiki -d -p 8080:80 steadyops/docker-mediawiki

Navigate to http://localhost:8080 and you should see something like the below, follow the installation wizard.

mediawiki docker visual editor

I used SQLite for simplicty and used the directory we created above (/var/www/data)

mediawiki docker visual editor

Don't forget to enbable Visual Editor extension

mediawiki docker visual editor

Finally, edit LocalSettings.php using this command in the terminal

docker exec -it $(docker ps -qf name=mywiki) vi /var/www/html/LocalSettings.php
and add the below snippet to enable visual editor by default for all users.
    if ( $_SERVER['REMOTE_ADDR'] == '' ) {
     $wgGroupPermissions['*']['read'] = true;
     $wgGroupPermissions['*']['edit'] = true;
     $wgDefaultUserOptions['visualeditor-enable'] = 1;

Try editing a page, Voila! Visual Editor should be working.

mediawiki docker visual editor

{{ message }}

{{ 'Comments are closed.' | trans }}