Extension:VisualEditor

The VisualEditor extension allows for editing pages as rich content. It is based around a JavaScript library, also called "VisualEditor", that can potentially be used outside of MediaWiki as well. This page covers instructions for installing and configuring the VisualEditor extension. For help on using it, see. For information on the development of the extension and the library, see.

For the General User
You do not need to download the extension because it comes with the MediaWiki tarball.

If you are using Git
The following download instructions are for use with the latest nightly build of MediaWiki only.


 * VisualEditor’s master branch contains the latest code, as used at Wikimedia. This code is potentially slightly buggy or unstable, but is likely to have fewer bugs and more features than old builds.
 * The master branch requires alpha builds of MediaWiki and will not work with the older, official releases of MediaWiki like ; for that, use the  branch (command:  ).
 * The  command is vital, as VisualEditor MediaWiki extension needs the core VisualEditor submodule to work. If you do not use this command, VisualEditor will fail to work.
 * See for details on linking an alpha build of the Parsoid library up to VisualEditor; the latest version of VisualEditor will need a development version of Parsoid as well.  You must follow the instructions on the  page to configure Parsoid if you are installing VisualEditor from git, or using an alpha release of 1.36!  If you do not, VisualEditor will fail to work.

Installation
VisualEditor needs to be installed with:

Skin compatibility
VisualEditor is known to be compatible with the following skins: Other skins are not officially supported, but it should be compatible with any skin that uses the required HTML structure – see . Some fiddling with skin stylesheets might be necessary to make everything look nice. It will load on any skin if it matches the feature detection.
 * Minerva (was part of )
 * Minerva (was part of )
 * Minerva (was part of )
 * Minerva (was part of )
 * Minerva (was part of )
 * Minerva (was part of )
 * Minerva (was part of )
 * Minerva (was part of )

Short URLs on Apache
If you are using non-standard short URLs such as "https://wiki.example.org/Page_title" on Apache, you need to adapt the rewrite rules of the /webserver/.

Enabling the write API
The user groups who should be able to use VisualEditor must have access to the MediaWiki write API. needs to be set accordingly, e.g. for the user group named user this is done with:

Linking with Parsoid
By default VisualEditor is automatically configured to talk to a Parsoid service running on the same host (and on the same port). You should not need to change this in most cases!

Some cases when you do need to change the URL of Parsoid:
 * Your MediaWiki server is behind a proxy (different remote and local port).
 * Your MediaWiki is running inside a docker container with port mapping.
 * You want to run Parsoid on a dedicated host or cluster.

If you need to do this, add the following code to your  to specify the URL for your Parsoid instance:

Note that you do not need to the initialise the  array anywhere in LocalSettings.

Parsoid's  setting here must match the host portion of   on the host running the Parsoid service.

If you set  then you will also need to install Parsoid, either via   (below) or manually on a separate server or via the developer instructions on the Parsoid page.

Note for developers: as noted above, in development releases including 1.36-alpha Parsoid will need to be manually loaded. This will change before 1.36 is released. If you are running a development release you should follow the instructions in —at the very least add the following to your :

Allowing VisualEditor on page titles containing slashes
If you are serving MediaWiki from apache2, you will need to add the following to your top level server configuration (often a  section in   or similar):

If you do not, then VisualEditor will complain that "Revision IDs returned by the server do not match" or simply "Error contacting the Parsoid/RESTBase server (HTTP 404)" when editing a page title containing a slash, for example a subpage. See 268953 and the apache documentation for more information.

If the Apache server happens to be behind a Nginx proxy then its  stanza should make use of the   parameter (cf. discussion on StackOverflow).

Enabling VisualEditor
The following optional configurations can be used:

Other extensions which load plugins for VE can be loaded before or after VE; the plugins should work either way.

Changing active namespaces
By default, VisualEditor is only enabled for the namespaces "Main", "User", "File" and "Category". It is however possible to add or remove namespace using the English language canonical names defined for the respective namespaces such as e.g. "Project", "Talk" etc. Additional custom namespaces use the names used to create them.

Switching between wikitext and visual editing
VisualEditor allows you to switch back and forth between wikitext and visual editing.

However, without a server, switching from wikitext to visual editing may result in dirty diffs when saving (non-semantic whitespace changes to wikitext formatting). If you want the ability to switch between wikitext editing and VisualEditor and save your changes without dirty diffs, you must install a RESTBase server.

If you can't set up RESTBase and dirty diffs are undesirable on your wiki (e.g. your users carefully review all changes), you can disable this feature using.

When switching isn't possible and you try to switch from a wikitext editing environment into VisualEditor, your only options are Cancel or Discard my changes and switch; any changes you made will be discarded if you switch.

RESTBase setup for switching
To set up your own RESTBase service, follow the, paying special attention to the Parsoid configuration.

Once the RESTBase server is operational, add the following code to your :

where  is the value of the host portion of   on the host running Parsoid. Make sure that the port you specify here (e.g. ) is the same port as you specified in the RESTBase configuration. Be careful to include the trailing slash on !

If you can't access RESTBase port (e.g. ), you can work around the problem using an httpd proxy; refer to "". If your wiki is served through HTTPS, RESTBase must also be served through HTTPS; else users could experience "mixed-content" errors and the switch from wikitext to VisualEditor would not work.

Now when you make changes in a wikitext editor, you can switch to VisualEditor without causing dirty diffs.

Servers with multiple virtual sites
If Apache2 is configured with multiple virtual sites, Parsoid is (in standard configuration) only able to access the default site. To check for this problem, run  on the server, or run   ensuring the URL matches the SSL certificate used on the server.

If the response contains the main page of your wiki then you don't have the problem, but if it doesn't, you may need to configure a host alias that Parsoid can use:

Look at the apache2 configuration file for the virtual server hosting the wiki, near the top of the file there should be a line like: "" If the '*' is present, then the alias can be to localhost, if there is an IP address replacing the '*' then the alias must be to that IP address. In the same file add a line: ""

In the hosts file of the server (/etc/hosts on Ubuntu), add a route for my_wiki_alias, either for 127.0.0.1 (if the apache2 virtual server configuration had the '*' above, else to the IP address from the apache2 virtual server configuration.

Now set the hostname in  to   on the host running VisualEditor.

Linking with Parsoid in private wikis
In a private wiki, you should do this:


 * Forwarding cookies to Parsoid

This is the default configuration for VisualEditor if not everyone is allowed to read every page, as such the below should not be required in most cases.

If you do set any property in  you will have to  or VisualEditor will not work!

Complete list of configuration options
Each configuration option is shown without the  prefix for brevity; replace the '…' when using.

Related configuration parameters
See also for information about configuring the drag-and-drop/copy&paste functionality for uploading media files through VisualEditor.

Integration of "2017 wikitext editor"
To enable the so-called "2017 wikitext editor", follow the instructions for Wikitext mode in the.

It is also possible to enable wikitext syntax highlighting for this editor; to do this, you must install the extension.

Rich template forms
allows the addition of template information, making templates easier to insert with the VisualEditor

Improved citation tool
Citations can be improved by configuring the, and also by setting up.

Hooks
As of 2023, Visual Editor sets around 10 JavaScript hooks and 3 PHP hooks that are listed at VisualEditor/Hooks.

Troubleshooting

 * All templates appear as puzzle icons instead of displaying its contents
 * Check Topic:V6tbh7vonvg3mzl9


 * Docker : Error contacting the Parsoid/RESTBase server (curl error : 7)
 * Ensure that the mediawiki container name does not equal to the domain the wiki is running on. If both names are equal, the api will try to connect to the domain the wiki is running on, but only receive the local ip of the container. This will cause errors when ssl is enabled.


 * Error contacting the Parsoid/RESTBase server (curl error : 7) Couldn't connect to server
 * Ensure that the mediawiki native hostname does not equal to the domain the wiki is running on. If both names are equal, the api will try to connect to the domain the wiki is running on, but will have difficulty resolving the domain.


 * Error contacting the Parsoid/RESTBase server : (curl error : 60) Peer certificate cannot be authenticated with given CA certificates
 * You may be using a self-signed SSL certificate. Workaround unknown.


 * Error contacting the Parsoid/RESTBase server : http-bad-status
 * When editing subpages on Apache,  must be added in the VirtualHost section of the wiki (268953).
 * On a HTTP Auth protected wiki, you must allow local access via an allow / geo block in your Apache/Nginx config
 * On a private wiki, see "parsoidserver-http-bad-status : 401", below


 * Error contacting the Parsoid/RESTBase server (HTTP 400)
 * If you are using a Short URL config, check your Nginx/Apache config for  block – see respective Manual:Short_URL
 * An unresolved error for some users. (Topic:Wc5hugtg7besmcb2)


 * Error contacting the Parsoid/RESTBase server (HTTP 403)
 * Caused by the 'writeapi' right being revoked (or not granted). Check your LocalSettings.php and remove any overrides for this right. (265043)
 * Or caused by ModSecurity (or possibly another WAF). Request your hosting service provider to whitelist the security rules that were being triggered by your site. A rule known to cause this is the "missing content-length" check enabled. This rule checks for 'suspicious' but protocol valid behavior. It triggers on multipart POST's and should not be enabled (265043#6866940)


 * Error contacting the Parsoid/RESTBase server (HTTP 404)
 * Possible reasons for this problem:
 * Caused by ModSecurity (or possibly another WAF). Request your hosting service provider to whitelist the security rules that were being triggered by your site.
 * When the web server is Apache,  must be added in the VirtualHost section of the wiki (261921).
 * Possibly Parsoid is not loaded when using default configuration (local Parsoid, no RestBase). Add to LocalSettings.php:.
 * If you are using a proxy server or a docker port mapping you will need to set your local url in  (see: ).
 * Caused by VisualEditor for MW 1.35 and later due to insufficient rewrite rules in case of non-standard short URLs (270376). See /webserver/ for the solution.
 * If using short URLs, place "RewriteCond %{HTTP_USER_AGENT} !^(VisualEditor)" just above "RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-f".
 * If you have installed MediaWiki using the Debian  package, and if the file   is not in your installation path, you are probably missing some new symbolic links (eventually evaluate the command   from the installation path to install only the missing ones. In this case, you can ignore the errors about links you aready have)


 * Error contacting the Parsoid/RESTBase server (HTTP 415)
 * If you're running a private wiki, you might be encountering bug 268277.
 * If you're running a secure site (SSL), but $wgServer is set to a protocol-relative URL, you might be encountering bug 299175.


 * Error contacting the Parsoid/RESTBase server (HTTP 500) when saving page with accented character in title, on Windows/IIS
 * IIS expects URLs to be encoded using legacy single-byte encodings, but MediaWiki uses UTF-8. Follow these instructions to resolve this: https://support.microsoft.com/en-us/help/2277918/fix-a-php-application-that-depends-on-the-request-uri-server-variable (269673)


 * Error contacting the Parsoid/RESTBase server (HTTP 500) when trying to edit an existing page with VisualEditor
 * Persisting in MW 1.35.x . See 270377


 * Error loading data from server : HTTP 500. Would you like to retry?
 * Possible reasons for this problem:
 * On new installs, "curl", "php5-curl", or "php7.0-curl" (or other package appropriate to your PHP version) is not installed on the server.
 * setMwApi uri is set incorrectly with e.g. https instead of http.
 * Bad rewrite rules in the apache configuration that would cause API failures.
 * The SSL/TLS certificates are expired.
 * When directory  (for example "/tmp") has not write permissions.
 * When running Windows Authentication with Apache, you would need to white-list 127.0.0.1 in your Apache conf, as Apache doesn't have read access.


 * No visible error (Appears to load forever)
 * Check the parsoid log file, and consult.


 * parsoidserver-http-bad-status : 401
 * Caused by read or edit restrictions (aka 'private wiki'). If you've set up a private wiki and don't want to use cookie forwarding, you can explicitly remove restrictions for Parsoid by IP address. (See Topic:Vv35plp6g16qno0s and the ticket: MW 1.35.0 "Error contacting the Parsoid/RESTBase server: http-bad-status" on a private wiki)


 * parsoidserver-http-curl-error : couldn't connect to host.
 * Parsoid is not running, or  is not set correctly


 * parsoidserver-http-curl-error : Failed to connect to .... : Permission denied.
 * Can be caused by a cURL request on a Security-Enhanced Linux (SELinux, like CentOS) to a non standard port like 8000 in the example configuration above, see http://www.akashif.co.uk/php/curl-error-7-failed-to-connect-to-permission-denied and https://www.centos.org/forums/viewtopic.php?f=47&t=53223&p=225372#p225372


 * parsoidserver-http-not-acceptable : 406
 * Caused by Parsoid 0.9 enforcing clients to return a 1.6.0 and greater HTML version string in the header. This most likely affects Debian users as they are using slightly older MediaWiki versions with MediaWiki's Parsoid APT repository. This can be fixed by either downgrading to 0.8 (not easy as 0.8 no longer exists in the repository) or by editing  so that  . The latter will be overwritten on any package upgrade, so it is up to the administrator to lock the package and keep on top of updates manually.


 * parsoidserver-http-not-found : 404 (or timeout)
 * Caused by wrong path to MediaWiki API endpoint. Set correct url to the right path to  in Parsoid's   config file. If you have set up following the recommendations, your API path would be "http://localhost/w/api.php". Add this API path to "localsettings.js" like "parsoidConfig.setMwApi({uri: 'http://localhost/w/api.php ' });".


 * Synology
 * Make sure you click the options that engage VisualEditor. If the VE returns an error when you try to save the edited page, this likely means you did not enable zlib (an optional dependency, but required for VE) during installation.
 * Go to: MainMenu (the four little boxes in the left corner of the Synology screen) and choose Web Station
 * In the left sidebar choose  Script Language Settings
 * Choose MediaWiki and click Edit and then Extensions
 * At the very bottom of the list, click the zlib box. You will also want to enable the optional dependencies mysql, imagick and zip.

Development documentation

 * VisualEditor/Gadgets - non formal guide for hacking VisualEditor. Includes code snippets and other information useful to gadget authors (and other custom JS devs).
 * API Documentation - information on some VisualEditor JS classes.