VisualEditor

Category:MediaWiki extension VisualEditor
Extension name	VisualEditor
About this article / disclaimer	[[Has about meta information::The VisualEditor project aims to create a reliable rich-text editor for MediaWiki. [...] The extension relies on the separate nodeJS-based Parsoid parser service to be up and running in order to edit pages. Stable release is planned for 2014.]]
Logo
Screenshot
Location of the main author	Berlin
Coordinates of the main authors	52.510885, 13.398937
Developers
Licences
Description
Mediawiki requirements	1.24 (or better)
Dependencies	node.js, parsoid
Related extensions (documented here)
Related extensions
Discussion
Language support
Status	beta
First release date
Last release date (as of 2015/04/20!)
Last version number	0.1.0 (as of June 2014)
Programming language	JavaScript, PHP
Alternatives	none
Website	home page
Publications
Support websites	web site
Example websites
Last edited	2015/04/20

Introduction

The Mediawiki VisualEditor is a Wysiwyg editor for Mediawiki versions that came out in late 2014. The system is also deployed in most Wikipedia versions (however since it is still in Beta, only registered users can use it). Installation of this extension is more complex than usual and requires two components:

• Extension:VisualEditor
• Parsoid, implemented with Node.js

I managed to get this installed and working, both on a test server and in this wiki. Anyhow, VisualEditor does seem work on MediaWiki 1.24, but the installation is very tricky. VisualEditor also seems to handle most pages that include templates and semantic forms. I don't think that semantic tags will work, but since we always use semantic forms that's more or less ok. Though, I consider moving forms-based pages into a special name space. Will have to do some extra testing however - Daniel K. Schneider (talk) 18:38, 26 June 2014 (CEST).

Notice: This extension sometimes breaks (depending on the combo of installed versions) - Daniel K. Schneider (talk) 15:48, 19 September 2014 - Daniel K. Schneider (talk) 12:37, 17 April 2015 (CEST). Therefore upgrade on a test server first, if you are keen to have this working all the time.

MediaWiki 1.24 installation notes

Made for Ubuntu 14.04 LTS (and should be somewhat useful for most Debian systems)

Dependencies

The official extension page (as of April 2015) claims that it is necessary to install Universal Language Selector. I don't know where and why it should be necessary to have it.

Install it if you like (but there is a lot of extra work if you really want to support all languages and fonts ....)

git clone https://gerrit.wikimedia.org/r/p/mediawiki/extensions/UniversalLanguageSelector.git

In LocalSettings.php // require_once "$IP/extensions/UniversalLanguageSelector/UniversalLanguageSelector.php";

Download and install the extension

cd installdir

Update your wiki first to the recent patches

git pull

Get and install the VisualEditor extension

cd extensions
git clone https://gerrit.wikimedia.org/r/p/mediawiki/extensions/VisualEditor.git
cd VisualEditor

Initialize the submodule (whatever that is ...)

git submodule update --init

Adjust the version

git checkout REL1_24

So far, I did not manage to make it run under REL1_25 Beta - Daniel K. Schneider (talk) 15:46, 17 April 2015 (CEST). After clicking on the edit button, nothing happens (and no php errors).

Download and install the parsoid

This depends on your OS. For Ubuntu 12.04 LTS you cannot use the official distro as explained in the official setup documentation.

Install Parsoid (part I)

Firstly add a key

gpg --keyserver keys.gnupg.net --recv-keys 5C927F7C
gpg -a --export 5C927F7C | sudo apt-key add -

and edit the /etc/apt/sources.list file:

deb [arch=amd64] http://parsoid.wmflabs.org:8080/deb wmf-production main

Then get/install Parsoid

sudo apt-get update
sudo apt-get install parsoid

This will create:

• a user parsoid (uid = 118)
• A Parsoid server that runs on port 8142

Check it it runs, e.g.

more  /var/log/parsoid/parsoid.log 

Files:

/usr/lib/parsoid # the parsoid installation directory
/etc/default/parsoid # default settings for the server (places)
/etc/mediawiki/parsoid/settings.js # Mediawiki(s) configuration
/var/log/parsoid/parsoid.log

With the above Parsoid sits on your machine, but is not yet operational. See further down.

Install NodeJS, npm and php5-curl if not done

apt-get install nodejs
# Create a symbolic link for legacy code (Ubuntu changed node to nodejs since V. 12 or 13....)
ln -s /usr/bin/nodejs /usr/sbin/node
apt-get install npm
# PHP curl module is needed
apt-get install php5-curl
apache2cl restart

On an older Ubuntu you will have to get different (more recent) NodeJS, in place of the one in "official" distribution.

sudo apt-get update
sudo apt-get install -y python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs=0.10*

Test if it's there, on your serveur:

 nodejs --version
 v0.10.25

Configure Parsoid

Continue parsoid install

Go to the Parsoid source directory

cd /usr/lib/parsoid/src

Type

npm install

This will take a while and will download extra stuff. npm seems to be a kind of nodejs management tool (yes I don't understand anything here...)

Test it (again in the src directory)

npm test

Wait for a while. You will get something like (last lines)

       ✓ [[../../New/Cousin]] 
       ✓ [[../../../]] 
70 passing (8s)

Configure parsoid install

The instructions are a bit confused on the official web sites, e.g. not even the directory locations are clear. According to this, if you would like to point the Parsoid web service to your own wiki, go to the parsoid/api directory and create a localsettings.js file based on localsettings.js.example.

However, Ubuntu reads the config file from here:

/etc/mediawiki/parsoid/settings.js

because:

/etc/init.d/parsoid reads from /etc/default/parsoid the following configuration defaults:

PARSOID_LOG_FILE=/var/log/parsoid/parsoid.log
PARSOID_SETTINGS_FILE=/etc/mediawiki/parsoid/settings.js

Therefore do this:

cd /etc/mediawiki/parsoid/settings.js

Edit settings.js and define parsoidConfig.setInterwiki as in the examples below:

   // parsoidConfig.setInterwiki( 'test', 'http://localhost/test/api.php' ); // does not work in our wiki (virtual host)
    parsoidConfig.setInterwiki( 'test', 'http://edutechwiki.unige.ch/test/api.php' ); // works
   // parsoidConfig.setInterwiki( 'noconn', 'http://213.127.84.12:80/wikiarst/api.php' );
   //parsoidConfig.setInterwiki( 'disney', 'http://disneychannel.wikia.com/api.php' );

The first argument to setInterwiki is not the "pretty name", but the long one, i.e. the first component you see in the api URL. E.g. for this wiki we use the following settings:

In LocalSetting.php:

$wgScriptPath	    = "/mediawiki";
....
$wgVisualEditorParsoidPrefix = 'mediawiki';

In settings.js:

parsoidConfig.setInterwiki( 'mediawiki', 'http://edutechwiki.unige.ch/mediawiki/api.php' );

In other installs, you may have to edit file /usr/lib/parsoid/src/api/localsettings.js to add your wikis (you can use several of these). Of course you also should test if the api.php URL works. If you use server aliases, http://localhost/yourwiki may not work at all.

After making changes to the config file, restart the parsoid

/etc/init.d/parsoid restart

Configure the extension

In Localsettings.php, add something like this:

# VISUAL Editor
// If this breaks, then you likely have a version mismatch - downgrade visual editor or upgrade the wiki to alpha code
require_once("$IP/extensions/VisualEditor/VisualEditor.php");
 
// OPTIONAL: Enable VisualEditor in other namespaces
// By default, VE is only enabled in NS_MAIN
//$wgVisualEditorNamespaces[] = NS_PROJECT;
 
// Enable by default for everybody
$wgDefaultUserOptions['visualeditor-enable'] = 1;
 
// Don't allow users to disable it
$wgHiddenPrefs[] = 'visualeditor-enable';
 
// OPTIONAL: Enable VisualEditor's experimental code features
//$wgVisualEditorEnableExperimentalCode = true;

// Interwiki prefix to pass to the Parsoid instance - must match what you declared in the parsoid settings
// Parsoid will be called as $url/$prefix/$pagename
$wgVisualEditorParsoidPrefix = 'test';

// Declare the Parsoid - Make sure to get the right port
$wgVisualEditorParsoidURL = 'http://localhost:8142';

Troubleshooting

It is really really crucial to get the URLs right in the various configuration files

1) Control if Apache is ok. On the command line, type:

 apache2ctl -S

Depending on your installation you should get something like this (and not some random name that does not match your wiki URL !!)

VirtualHost configuration:
129.194.7.85:*         edutechwiki.unige.ch (/etc/apache2/sites-enabled/mediawiki.conf:1)

Make very sure that in your Apache mediawiki.conf file you get the right name of your Internet alias, for example:

 <VirtualHost edutechwiki.unige.ch>
  	ServerAdmin ....@.....
       ServerName edutechwiki.unige.ch

2) Make sure that the Parsoid prefix is correct and consistent. Also, if your server is not setup to deal with the localhost URL, you cannot follow the "official" examples. E.g. for this wiki, the configuration used is the following (at the time of writing, for MW 1_24)

In file /etc/mediawiki/parsoid/settings.js:

parsoidConfig.setInterwiki( 'mediawiki', 'http://edutechwiki.unige.ch/mediawiki/api.php' );

In file LocalSettings.php:

$wgVisualEditorParsoidURL = 'http://localhost:8142';
$wgVisualEditorParsoidPrefix = 'mediawiki';