mardi 31 décembre 2013

Installation de Visual Editor sur mediawiki

Mediawiki est le nom du logiciel qui fait tourner les wikis de la fondation wikipedia. Depuis maintenant quelques années, ces derniers cherchent à mettre en place un éditeur de code wiki user friendly et compatible avec le code wiki existant. En effet, la fondation a constaté que la syntaxe du wiki était un obstacle à l'arrivée de nouveaux contributeurs. Même si la situation n'est pas non plus catastrophique, la fondation a donc voulu diminuer cette difficulté en lançant un éditeur plus conviviale.

Les résultats de ces travaux sont l'extension Visual Editor pour mediawiki. Je vous laisse vous rendre sur cette page pour avoir plus de détail : http://meta.wikimedia.org/wiki/VisualEditor/MediaQ%26A

Cette interface a été déployé sur pratiquement tout l'ensemble des serveurs de la fondation wikipedia et fait toujours l'objet de travaux.

Voilà pour le contexte. Voyons maintenant comment nous en servir sur notre propre wiki.

Fonctionnement de Visual Editor

Un des pré-requis de ce logiciel comme je l'expliquais plus haut est de rester compatible avec la quantité énorme d'article déjà existant et donc de respecter le rendu des articles existants. Pour se faire, l'éditeur passe par une phase de rendu du code wiki en HTML en utilisant l'API du wiki avant d'être resservi à l'internaute au travers d'un éditeur HTML. Quand une modification est opérée (sur le code HTML), ce code est renvoyé au travers un sérialiseur qui se chargera de faire une translation inverse et surtout de supprimer les fausses différences. Par fausses différences, j'entends la suppression des espaces surnuméraires, le remplacement des doubles quotes (") par de simple quote (') etc.

Pour les plus curieux, je vous laisse découvrir l'article suivant qui explique ça mieux que moi : https://blog.wikimedia.org/2013/03/04/parsoid-how-wikipedia-catches-up-with-the-web/

Bref, ces deux services sont assurés à l'aide d'un webservice écrit en node.js (serveur d'application en javascript). Vous l'aurez compris, il va donc s'agir dans un premier temps d'installer ce serveur d'application et de l'intégrer ensuite dans notre wiki.

Installation de node.js

Par la suite, nous travaillerons sur une Ubuntu quantal (12.10) mais toutes les versions suivantes devraient fonctionner sans problème. J'ai également réalisé cette installation sur une CentOS 6.4. Il faut juste savoir qu'il faut disposer d'une version node 0.8 ou 0.10 minimum.

Bref, sous Ubuntu, nous allons tout d'abord rajouter les sources qui nous manquent :

add-apt-repository ppa:chris-lea/node.js
apt-get update
apt-get install nodejs

Installation de Parsoid

Node.js est maintenant présent sur la machine, nous allons nous attacher à récupérer les sources de Parsoid. Ce dernier ne fait pas encore l'objet d'une livraison stable mais se récupère directement au niveau du repository git. Cette récupération se fait à l'aide de la commande suivante :

git clone https://gerrit.wikimedia.org/r/p/mediawiki/services/parsoid

Rendons-nous maintenant dans l'arborescence nouvellement récupéré et lançons la récupération des plugins pré-requis :

cd parsoid
npm install

Au bout de quelques temps, nous devrions être en mesure de lancer notre instance Parsoid avec la commande suivante :

node api/server.js

A ce moment, node.js vous lancera des workers Javascript afin de prendre en charge le travail requis pour le webservice dont nous avons parlé plus haut. Pour vous assurez que tout fonctionne, nous pouvez vous rendre sur l'adresse suivante : http://localhost:8000/

Sachez que vous aurez peut-être des choses à adapter à votre configuration en fonction de votre wiki. La personnalisation se fera dans le fichier api/localsettings.js. Sachez qu'il y a un fichier exemple (localsettings.js.example) afin de vous donner des exemples de syntaxe.

Pour plus de détail, je vous laisse consulter l'article sur Parsoid à l'adresse suivante : http://www.mediawiki.org/wiki/Parsoid

Intégration au wiki

Le présent article n'a pas pour vocation d'expliquer comment s'installe mediawiki. Si vous avez besoin d'une piste pour faire cette étape, je vous laisse consulter cet article sur le sujet. Sachez qu'il vous faudra une version récente de mediawiki avec au moins une version 1.22.

Seconde chose, il va nous falloir récupérer une version de l'extension Visual Editor sur le site de mediawiki. La page suivante devrait vous permettre de récupérer ça : http://www.mediawiki.org/wiki/Special:ExtensionDistributor/VisualEditor

Il faudra ensuite :

  • Se rendre dans le répertoire des extensions du wiki : 
cd /var/www/wiki/extensions
  • Décompresser l'extension :
tar xfv .../wikimedia-mediawiki-extensions-VisualEditor-43e96d7.tar.gz
  • Renommer le répertoire :
mv wikimedia-mediawiki-extensions-VisualEditor-43e96d7/ VisualEditor

Enfin, nous pouvons rajouter les lignes suivantes à la fin du fichier LocalSettings.php :

# Parsoid and Visual Editor configuration
require_once("$IP/extensions/VisualEditor/VisualEditor.php");
$wgDefaultUserOptions['visualeditor-enable'] = 1;
$wgHiddenPrefs[] = 'visualeditor-enable';

$wgVisualEditorParsoidURL = 'http://localhost:8000';
$wgVisualEditorParsoidPrefix = 'localhost';

Une petite démonstration parlant mieux qu'un long discours, je vous laisse découvrir une petite démo du fonctionnement de ce plugin :


NB : Bonne année à tous !