VisualEditor: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
 
(67 intermediate revisions by the same user not shown)
Line 5: Line 5:
|screenshot=MW1 24-visual-editor-test.png
|screenshot=MW1 24-visual-editor-test.png
|author_location=Berlin
|author_location=Berlin
|mediawiki=1.24 (or better)
|mediawiki=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
|dependencies=node.js, parsoid
|status=beta
|status=beta
|last_version=0.1.0 (as of June 2014)
|last_version=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
|programming language=JavaScript, PHP
|alternative=none
|alternative=none
|website=https://www.mediawiki.org/wiki/Extension:VisualEditor
|website=https://www.mediawiki.org/wiki/Extension:VisualEditor
|support_website=https://www.mediawiki.org/wiki/Extension:VisualEditor
|support_website=https://www.mediawiki.org/wiki/Extension:VisualEditor, https://www.mediawiki.org/wiki/VisualEditor,
|last_edit=2015/04/20
|last_edit=2015/04/20
}}
}}
== Introduction ==
== 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:
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:


* [https://www.mediawiki.org/wiki/Extension:VisualEditor Extension:VisualEditor]
* [https://www.mediawiki.org/wiki/Extension:VisualEditor Extension:VisualEditor]
* [https://www.mediawiki.org/wiki/Parsoid Parsoid], implemented with [http://en.wikipedia.org/wiki/Node_js Node.js]
* [https://www.mediawiki.org/wiki/Parsoid Parsoid], a combined MediaWiki and HTML parser implemented with [http://en.wikipedia.org/wiki/Node_js Node.js]


I managed to get this installed and working, both on a test server and in the french version of this wiki. I took me about 3 hours (mostly because I didn't think enough and because I am not a sysadmin ...). Anyhow, it does seem work on MediaWiki 1.24. It 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 semantic forms that's ok. Will have to do some extra testing however - [[User:Daniel K. Schneider|Daniel K. Schneider]] ([[User talk:Daniel K. Schneider|talk]]) 18:38, 26 June 2014 (CEST).  
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 and 1.27 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 is more or less ok. Though, I consider moving forms-based pages into a special name space. Will have to do some extra testing however - [[User:Daniel K. Schneider|Daniel K. Schneider]] ([[User talk:Daniel K. Schneider|talk]]) 18:38, 26 June 2014 / Sept. 2015.  


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


== MediaWiki 1.25 beta installation notes ==
== Installation notes for MW 1.27x under Ubuntu 16.x ==


'''Made for Ubuntu 14.04 LTS''' (and should be somewhat useful for most Debian systems)
It seems to be working for now - [[User:Daniel K. Schneider|Daniel K. Schneider]] ([[User talk:Daniel K. Schneider|talk]]) 20:01, 6 December 2016 (CET)


=== Download and install the extension ===
=== Pre-requisites ===


cd installdir
* A node.js server and its npm package manager must be installed on your machine. To check if it exists, type <code>nodjs --version</code>


Update your wiki first to the recent patches
sudo apt-get install nodejs
  git pull
  sudo apt-get install npm


Get and install the VisualEditor extension
* Curl must be installed, including the php library.
git clone https://gerrit.wikimedia.org/r/p/mediawiki/extensions/VisualEditor.git
cd VisualEditor
Initialize the submodule (whatever that is ...)
git submodule update --init


Backtrack to an older version if your work with an older wiki version ! However, I did not manage to make this work with MW 1_23. If you want to try yourself for MW 1_23, use:
sudo apt-get install curl
  git checkout REL1_23
sudo apt-get install php7.0-curl
sudo apt-get install php-curl
  sudo apachectl restart


=== Download and install the parsoid ===
=== Installation of 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.
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.


==== Install Parsoid (part I) ====
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...


Firstly edit the /etc/apt/sources.list file:
'''''Installing/upgrading parsoid'''''
deb http://parsoid.wmflabs.org:8080/debian wmf-production/


Then get/install 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 update
  sudo apt-get install parsoid
  sudo apt-get install parsoid


This will create:
'''''Configure parsoid '''''
* a user ''parsoid'' (uid = 118)
 
* A Parsoid server that runs on port 8142
Edit file /etc/mediawiki/parsoid/config.yaml
 
For each wiki, add two lines likes this under '''mwApis:''', one that defines the URL for the API and the other that gives a domain name (same as the one used in LocalSettings.php). Make sure the the API URL does work !
        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 ===
 
'''Normal users'''


Check it it runs, e.g.
(tested with MW 1.31, Sept. 2018)
more  /var/log/parsoid/parsoid.log


Files:
Take the one from the official [https://www.mediawiki.org/wiki/Special:ExtensionDistributor/VisualEditor extensions directory] and just extract the archive.
/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.
For example, '''do not use this, the URL will change'''
wget https://extdist.wmflabs.org/dist/extensions/VisualEditor-REL1_31-13a585a.tar.gz


==== Install NodeJS ====
'''Advanced users'''
On an older Ubuntu you will have to get different (more recent) NodeJS, in place of the one in "official" distribution.
cd extensions
<source lang="bash">
git clone https://gerrit.wikimedia.org/r/p/mediawiki/extensions/VisualEditor.git
sudo apt-get update
cd VisualEditor
sudo apt-get install -y python-software-properties python g++ make
git submodule update --init
sudo add-apt-repository ppa:chris-lea/node.js
 
sudo apt-get update
Make sure to select the right version, 'master' probably will not work. Checkout the good version and '''update the submodule again'''
sudo apt-get install nodejs=0.10*
git checkout REL1_27
</source>
git submodule update --init
'''but''', as we said above, for once it is a safer bet to get this extension from the distributor and not via git ....
 
In LocalSettings.php:
<source lang="php">
 
# Visual Editor
 
wfLoadExtension( 'VisualEditor' );


Test if it's there, on your serveur:
// Enable by default for everybody
<source lang="bash">
$wgDefaultUserOptions['visualeditor-enable'] = 1;
nodejs --version
v0.10.28
</source>


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


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


Go to the Parsoid '''source''' directory
// OPTIONAL: Enable VisualEditor's experimental code features
cd /usr/lib/parsoid/src
#$wgDefaultUserOptions['visualeditor-enable-experimental'] = 1;


Type
$wgVirtualRestConfig['modules']['parsoid'] = array(
npm install
// URL to the Parsoid instance
: This will take a while and will download extra stuff. ''npm'' seems to be a kind of ''node'' management tool (yes I don't understand anything here...)
// 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>


Test it (again in the src directory)
=== Allow visual editing in more than default namespaces ===
npm test


Your will get something like
Example (adapt to yours)
<source lang="php>
3206 total passed tests (expected 3206), 1927 total failures (expected 1927)
$wgVisualEditorAvailableNamespaces = [
--> NO UNEXPECTED RESULTS <--
                                      "0" => true,
==========================================================
                                      "2" => true,
WARNING: parserTests.txt not up-to-date with upstream.
                                      "102" => true,
        Run fetch-parserTests.txt.js to update.
                                      "104" => true,
                                      "106" => true,
                                      "_merge_strategy" => "array_plus"];
</source>
Tip: Look at the HTML source of [[Special:AllPages]]. The HTML options menu will list the numbers for your namespaces.


==== Configure parsoid install ====
=== Troubleshooting ===


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.
==== New installation is not working ====


However, Ubuntu reads the config file from here:
It is really really crucial to get the URLs right in the various configuration files
/etc/mediawiki/parsoid/settings.js


because:
1) Control if Apache is ok. On the command line, type:
:<code>/etc/init.d/parsoid</code> reads from <code>/etc/default/parsoid</code> the following configuration defaults:
  sudo apache2ctl -S
PARSOID_LOG_FILE=/var/log/parsoid/parsoid.log
Depending on your installation you should get something like this (and not some random name that does not match your wiki URL !!)
PARSOID_SETTINGS_FILE=/etc/mediawiki/parsoid/settings.js
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


Therefore do this:
2) Make sure that the Parsoid domain is correct and consistent.
cd /etc/mediawiki/parsoid/settings.js
: 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
    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' );


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.
3) Uninstall old code and configuration files and start fresh.


After making changes to the config file, '''restart''' the parsoid
==== Parsoid did work and stopped working ====
/etc/init.d/parsoid restart


=== Configure the extension ===
This arrived on March 28, 2018, Ubuntu Server 16.04 / Mediawiki 1.27.4. According to [https://www.mediawiki.org/wiki/Extension_talk:VisualEditor a post on Mediawiki] one should install an old version. Firstly make sure that this is the problem
apt-cache show parsoid
If it shows ''pool/main/p/parsoid/parsoid_0.9.0all_all.deb'' then you got version 9 and you could try downgrading. It's probably safer than trying to install a new visual editor that also can break everything, but I just do not know. Also make sure to copy the configuration files in case they go away.


In <code>Localsettings.php</code>, add something like this:


<source lang="php">
apt-get purge parsoid
# VISUAL Editor
wget https://people.wikimedia.org/~ssastry/parsoid/debs/parsoid_0.8.0all_all.deb
// If this breaks, then you likely have a version mismatch - downgrade visual editor or upgrade the wiki to alpha code
  dpkg -i parsoid_0.8.0all_all.deb
require_once("$IP/extensions/VisualEditor/VisualEditor.php");
  apt-mark hold parsoid
 
// OPTIONAL: Enable VisualEditor in other namespaces
Remember what you did here. <code>apt-mark hold</code> prevents installing a new package. Revert this after installing a new evething ...
// By default, VE is only enabled in NS_MAIN
  apt-mark unhold parsoid
//$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
===  https support ===
// Parsoid will be called as $url/$prefix/$pagename
$wgVisualEditorParsoidPrefix = 'test';


// Declare the Parsoid - Make sure to get the right port
* Is possible, read the [https://www.mediawiki.org/wiki/Extension:VisualEditor#Parsoid_over_HTTPS official manual page] (not tested so far)
$wgVisualEditorParsoidURL = 'http://localhost:8142';


</source>
* Requires getting and installing certificates...


=== Localisation ===
== Tips for old version ==


Is not fully done in the alpha wiki (that's normal). The minimum to do on on July 27 2014 was to edit  <code>MediaWiki:Vector-more-actions&action=edit&redlink=1</code>
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 ...


Added the ''Plus'' word for the English ''More''
[[category: Mediawiki documentation]]

Latest revision as of 15:51, 13 September 2018

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 and 1.27 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 is 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 your wiki 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

It seems to be working for now - Daniel K. Schneider (talk) 20:01, 6 December 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:, one that defines the URL for the API and the other that gives a domain name (same as the one used in LocalSettings.php). Make sure the the API URL does work ! 

       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

Normal users

(tested with MW 1.31, Sept. 2018)

Take the one from the official extensions directory and just extract the archive.

For example, do not use this, the URL will change 

wget https://extdist.wmflabs.org/dist/extensions/VisualEditor-REL1_31-13a585a.tar.gz

Advanced users 

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 REL1_27
git submodule update --init

but, as we said above, for once it is a safer bet to get this extension from the distributor and not via git ....

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'
);

Allow visual editing in more than default namespaces

Example (adapt to yours) 

$wgVisualEditorAvailableNamespaces = [
                                      "0" => true,
                                      "2" => true,
                                      "102" => true,
                                      "104" => true,
                                      "106" => true,
                                      "_merge_strategy" => "array_plus"];

Tip: Look at the HTML source of Special:AllPages. The HTML options menu will list the numbers for your namespaces.

Troubleshooting

New installation is not working

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.

Parsoid did work and stopped working

This arrived on March 28, 2018, Ubuntu Server 16.04 / Mediawiki 1.27.4. According to a post on Mediawiki one should install an old version. Firstly make sure that this is the problem 

apt-cache show parsoid

If it shows pool/main/p/parsoid/parsoid_0.9.0all_all.deb then you got version 9 and you could try downgrading. It's probably safer than trying to install a new visual editor that also can break everything, but I just do not know. Also make sure to copy the configuration files in case they go away. 


apt-get purge parsoid
wget https://people.wikimedia.org/~ssastry/parsoid/debs/parsoid_0.8.0all_all.deb
dpkg -i parsoid_0.8.0all_all.deb
apt-mark hold parsoid

Remember what you did here. apt-mark hold prevents installing a new package. Revert this after installing a new evething ... 

 apt-mark unhold parsoid

https support

  • Requires getting and installing certificates...

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=69623"