VisualEditor: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
Line 15: Line 15:
|last_edit=2015/04/20
|last_edit=2015/04/20
}}
}}
== Introduction ==
== Introduction ==


Line 73: Line 74:
           domain: 'test'
           domain: 'test'
         - # This is the only required parameter,
         - # This is the only required parameter,
           uri: 'http://edutechwiki.unige.ch/test/api.php'
           uri: 'http://edutechwiki.unige.ch/your_wiki/api.php'
           domain: 'fmediawiki'
           domain: 'your_wiki'


Restart parsoid:
Restart parsoid:
Line 90: Line 91:
  git submodule update --init
  git submodule update --init


== MediaWiki 1.26 upgrade notes from 1.25 ==
In LocalSettings.php:
<source lang="php">


(in progress, so far it doesn't work - [[User:Daniel K. Schneider|Daniel K. Schneider]] ([[User talk:Daniel K. Schneider|talk]]) 19:54, 30 March 2016 (CEST))
# Visual Editor


Before you attempt to make this work, make sure to upgrade all your other extensions, in particular WikiEditor.
wfLoadExtension( 'VisualEditor' );


* Upgrading to 1.26 or even upgrading the VisualEditor extension in MW 1.25 broke the editor
// Enable by default for everybody
 
$wgDefaultUserOptions['visualeditor-enable'] = 1;
=== Upgrade parsoid ===
sudo apt-key advanced --keyserver keys.gnupg.net --recv-keys 664C383A3566A3481B942F007A322AC6E84AFDD2
sudo apt-add-repository "deb https://releases.wikimedia.org/debian jessie-mediawiki main"
sudo apt-get update
sudo apt-get upgrade parsoid
sudo npm install
 
* Check if it runs
cp /dev/null /var/log/parsoid/parsoid.log
sudo /etc/init.d/parsoid restart
more /var/log/parsoid/parsoid.log
 
* Check if it is accessible (Firewall problem ?) from the command line (URL below should not work from a client machine)
curl http://localhost:8142
curl -L http://localhost:8142/edutechwiki.unige.ch/v3/page/html/Main_Page
curl -L your_domain:8142/wikitest/v3/page/html/Main_Page
 
=== Upgrade the extension code ===
 
If you installed the extension with git
cd extensions/VisualEditor
git checkout REL1_26
 
== MediaWiki 1.25.2 upgrade notes from 1.24 ==
 
I upgraded in sept. 2015 from a MW 1.24 installation to MW 1.25.2 and it seems to work (e.g. in this wiki).
 
Installation notes below for MW 1.24 should also work for MW 1.25, but make sure to get the right version combos.
 
* For the extension itself:
git checkout REL1_25
* For Parsoid, you must take recent code from another repository than below !! Read [https://www.mediawiki.org/wiki/Parsoid/Setup https://www.mediawiki.org/wiki/Parsoid/Setup] !!
 
sudo apt-key advanced --keyserver keys.gnupg.net --recv-keys 7A322AC6E84AFDD2
sudo apt-add-repository "deb https://releases.wikimedia.org/debian jessie-mediawiki main"
sudo apt-get update && sudo apt-get install parsoid
 
... or just upgrade if you already got one.
 
== MediaWiki 1.24 installation notes ==
 
'''Made for Ubuntu 14.04 LTS''' (and should be somewhat useful for most Debian systems)
 
This will '''NOT''' work for MediaWiki 1.26
 
=== Dependencies ===
 
The [https://www.mediawiki.org/wiki/Extension:VisualEditor official extension page] (as of April 2015) claims that it is necessary to install [https://www.mediawiki.org/wiki/Universal_Language_Selector 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
// Optional: Set VisualEditor as the default for anonymous users
// require_once "$IP/extensions/UniversalLanguageSelector/UniversalLanguageSelector.php";
// otherwise they will have to switch to VE
// $wgDefaultUserOptions['visualeditor-editor'] = "visualeditor";


=== 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 - [[User:Daniel K. Schneider|Daniel K. Schneider]] ([[User talk: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 [https://www.mediawiki.org/wiki/Parsoid/Setup 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.
<source lang="bash">
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*
</source>
Test if it's there, on your serveur:
<source lang="bash">
nodejs --version
v0.10.25
</source>
=== 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 [https://www.mediawiki.org/wiki/Parsoid/Setup 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:
:<code>/etc/init.d/parsoid</code> reads from <code>/etc/default/parsoid</code> 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/
: Edit <code>settings.js</code> and define <code>parsoidConfig.setInterwiki</code> 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, <code>http://localhost/yourwiki</code> may not work at all.
After making changes to the config file, '''restart''' the parsoid
/etc/init.d/parsoid restart
=== Configure the extension ===
In <code>Localsettings.php</code>, add something like this:
<source lang="php">
# 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
// Don't allow users to disable it
$wgHiddenPrefs[] = 'visualeditor-enable';
$wgHiddenPrefs[] = 'visualeditor-enable';
 
// OPTIONAL: Enable VisualEditor's experimental code features
// OPTIONAL: Enable VisualEditor's experimental code features
//$wgVisualEditorEnableExperimentalCode = true;
#$wgDefaultUserOptions['visualeditor-enable-experimental'] = 1;
 
// 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';


$wgVirtualRestConfig['modules']['parsoid'] = array(
// URL to the Parsoid instance
// Use port 8142 if you use the Ubuntu or Debian packages
'url' => 'http://your.full.site:8142',
// Parsoid "domain" -- ADAPT TO YOUR NEED, i.e. replace "your_wiki" by the same "domain" name you gave in the yaml.config file.
'domain' => 'your_wiki'
);
</source>
</source>


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


Line 324: Line 134:
         ServerName edutechwiki.unige.ch
         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)
2) Make sure that the Parsoid domain is correct and consistent.
 
3) Uninstall old code and configuration files and start fresh.
 
== Tips for old version ==


In file /etc/mediawiki/parsoid/settings.js:
I had VisualEditor going for MW 1.25. After that it broke. You can browse through the wiki history if you are really interested in that ...
parsoidConfig.setInterwiki( 'mediawiki', 'http://edutechwiki.unige.ch/mediawiki/api.php' );
In file LocalSettings.php:
$wgVisualEditorParsoidURL = 'http://localhost:8142';
$wgVisualEditorParsoidPrefix = 'mediawiki';


[[category: Mediawiki documentation]]
[[category: Mediawiki documentation]]

Revision as of 19:51, 6 December 2016

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 VisualEditor-logo.svg.png
Screenshot MW1 24-visual-editor-test.png
Location of the main author Berlin
Coordinates of the main authors 52.510885, 13.398937
Developers
Licences
Description
Mediawiki requirements 1.24 (or better). However, as of dec 2016, we recommend at least version 1.27. Also, installation and configuration procedures are different for older versions.
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 April 2015). But there are several 0.1.0 subminor versions. E.g. on Dec 2016 it was (9da5996)
Programming language JavaScript, PHP
Alternatives none
Website home page
Publications
Support websites web site, 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:

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 and 1.25, but the installation is very tricky and the software combination needs to be right. 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 / Sept. 2015.

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.

Installation notes for MW 1.27x under Ubuntu 16.x

Under construction -- Daniel K. Schneider (talk) 16:02, 2 November 2016 (CET)

Pre-requisites

  • A node.js server and its npm package manager must be installed on your machine. To check if it exists, type nodjs --version
sudo apt-get install nodejs
sudo apt-get install npm
  • Curl must be installed, including the php library.
sudo apt-get install curl
sudo apt-get install php7.0-curl
sudo apt-get install php-curl
sudo apachectl restart

Installation of Parsoid

Parsoid is a service that will run under node.js server and that will do the backend of the editing process, i.e. parse MediaWiki and HTML.

If you have old developper versions installed it could be a good idea to remove these. My new install only started working after: 

sudo apt-get --purge remove parsoid
rm -r /usr/lib/parsoid
etc.

My system admin skills are fairly low and I cannot explain why I had to remove every trace of an old parsoid...

Installing/upgrading parsoid 

sudo apt-key advanced --keyserver pgp.mit.edu --recv-keys 90E9F83F22250DD7
sudo apt-add-repository "deb https://releases.wikimedia.org/debian jessie-mediawiki main"
sudo apt-get install apt-transport-https 
sudo apt-get update
sudo apt-get install parsoid

Configure parsoid

Edit file /etc/mediawiki/parsoid/config.yaml

For each wiki, add two lines likes this under mwApis:: 

       mwApis:
       - # This is the only required parameter,
         uri: 'http://edutechwiki.unige.ch/test/api.php'
         domain: 'test'
       - # This is the only required parameter,
         uri: 'http://edutechwiki.unige.ch/your_wiki/api.php'
         domain: 'your_wiki'

Restart parsoid: 

sudo service parsoid restart

Installation of the extension

cd extensions
git clone https://gerrit.wikimedia.org/r/p/mediawiki/extensions/VisualEditor.git
cd VisualEditor
git submodule update --init

Make sure to select the right version, 'master' probably will not work. Checkout the good version and update the submodule again 

git checkout REL_27
git submodule update --init

In LocalSettings.php: 

# Visual Editor

wfLoadExtension( 'VisualEditor' );

// Enable by default for everybody
$wgDefaultUserOptions['visualeditor-enable'] = 1;

// Optional: Set VisualEditor as the default for anonymous users
// otherwise they will have to switch to VE
// $wgDefaultUserOptions['visualeditor-editor'] = "visualeditor";

// Don't allow users to disable it
$wgHiddenPrefs[] = 'visualeditor-enable';

// OPTIONAL: Enable VisualEditor's experimental code features
#$wgDefaultUserOptions['visualeditor-enable-experimental'] = 1;

$wgVirtualRestConfig['modules']['parsoid'] = array(
	// URL to the Parsoid instance
	// Use port 8142 if you use the Ubuntu or Debian packages
	'url' => 'http://your.full.site:8142', 
	// Parsoid "domain" -- ADAPT TO YOUR NEED, i.e. replace "your_wiki" by the same "domain" name you gave in the yaml.config file.
	'domain' => 'your_wiki'
);

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: 

 sudo 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 domain is correct and consistent.

3) Uninstall old code and configuration files and start fresh.

Tips for old version

I had VisualEditor going for MW 1.25. After that it broke. You can browse through the wiki history if you are really interested in that ...

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=VisualEditor&oldid=61021"