MediaWiki VisualEditor

MediaWiki VisualEditor is a user-friendly rich-text editor for MediaWiki, the software that powers Wikipedia search results.

...
WikiTeq
Share:

What is MediaWiki VisualEditor?

The MediaWiki VisualEditor offers a rich-text editing experience designed for MediaWiki, the platform behind Wikipedia and other sites managed by the Wikimedia Foundation. Aimed at simplifying the editing process, especially for those unfamiliar with MediaWiki's text formatting syntax, this user-friendly tool enhances the ease of modifying articles and various pages across MediaWiki sites.

VisualEditor allows users to edit articles using a WYSIWYG (What You See Is What You Get) interface, similar to word processors like Microsoft Word or Google Docs. This means that users can see how their changes will look on the page as they edit, rather than having to remember and type out special formatting codes. VisualEditor also includes a number of advanced features, such as the ability to add and edit tables, templates, and images, and to insert and format citations and references.

VisualEditor was developed by the Wikimedia Foundation as a way to make it easier for people to contribute to Wikipedia and other MediaWiki sites. It is available as an optional feature on many MediaWiki sites, and can be enabled or disabled by administrators on a per-wiki basis.

There is the VEForAll extension that delivers VisualEditor interface to the textarea inputs provided by Page Forms, CommentStreams, and FlexForm.

VEForAll Example

Steps to Install and Configure VisualEditor

To install VisualEditor on a wiki, you will need to have administrative privileges on the wiki. Here are the steps you can follow on MediaWiki 1.39:

  1. Enable the VisualEditor extension. You can do this by adding the following lines to your LocalSettings.php file:

    wfLoadExtension( 'VisualEditor' );
  2. After making these changes, go to the Special:Version page to verify that VisualEditor has been installed correctly.
  3. By default, VisualEditor is only enabled for the namespaces "Main", "User", "File" and "Category". ;If you want to enable VisualEditor for a different set of namespaces, you can use the following code in your LocalSettings.php file:

    $wgVisualEditorAvailableNamespaces = [
    'Project' => true,
    'File' => false,
    'Extra' => true,
    ]
  4. You can force VisualEditor interface to work in both WYSIWYG and source edit modes by adding:
    $wgVisualEditorEnableWikitext = true;
    $wgDefaultUserOptions['visualeditor-newwikitext'] = 1;
    $wgHiddenPrefs[] = 'visualeditor-newwikitext' ;


MediaWiki markup example

By default, VisualEditor creates a separate link for WYSIWYG editing. If you want to have just one link, that will open the last used editor, add the following line to your config:

$wgVisualEditorUseSingleEditTab = true;

;You can set the editor that will be provided by default. In this example we make VE the default editor:

$wgDefaultUserOptions['visualeditor-editor'] = 'visualeditor';

MediaWiki VisualEditor Alternatives

It's worth noting that visual editors are not always the best choice for everyone. Some users may prefer to use the default wikitext editor, which allows them to directly edit the underlying wiki markup. We can use the WikiEditor as an example: it is a built-in editor for MediaWiki that provides basic editing functionality, including the ability to format text, create links, and insert images and tables.

There are a number of alternatives to MediaWiki VisualEditor that you might consider using, depending on your specific needs and preferences:

  1. wikEd: This editor is supported and was created by the Wikipedia users. It was designed to make it easier for users to edit Wikipedia articles and other pages in the MediaWiki software. Being a pseudo-WYSIWYG editor actually, it adds a number of features to the standard MediaWiki editor, including syntax highlighting, spell checking, and search and replace functionality. It also includes a number of tools for formatting and organizing text, such as the ability to create tables and insert templates.

  2. TinyMCE: Another open source JavaScript-based WYSIWYG editor that can be added to the standard edit page and to textareas defined by the Page Forms. TinyMCE is designed to be easy to use and integrate into web applications. It supports a range of formatting options and includesfeatures like spell check and file upload. The extension includes the free core version of the TinyMCE editor.


Editors comparison


VisualEditorWikiEditorTinyMCE (core)wikEd
Supports WYSIWYGYesNoYesPseudo (rich-text)
Supports MediaWiki markupYesYesNoYes
Coding and supportWikimedia and MediaWiki developersWikimedia and MediaWiki developersEphox Corporation and MediaWiki developersCacycle and Wikipedia users
PricingFreeFreeFreeFree
LicenseMITGPL2.0 and laterGPL2.0 and laterPublic Domain

Conclusion

VisualEditor is a flagman extension under active development. Using VisualEditor for both WYSIWIG and source edit mode is a perfect solution for users looking for a consistent and functional editor workspace. Ultimately, the best editor for you will depend on your needs and preferences.

We have an additional article with information on;How To Use MediaWiki VisualEditor. Do not hesitate to reach out to us with any of your MediaWiki questions.

Latest Stories

Here’s what we've been up to recently.


Get our stories delivered

From us to your inbox weekly.