MediaWiki WYSIWYG Editor – a close look on visual editors

WYSIWYG (What You See Is What You Get): The visual editor enables writing and formatting in your wiki without the use of wiki mark-up characters. You can often see the phrase “write just like in Word” in marketing texts even though, to be honest, this often gives the user false expectations. One should always keep in mind that this is and remains a browser-based system. Nevertheless, the visual editor makes writing and formatting in the wiki a great deal easier.

The wordsmiths in Wikipedia (which runs with the wiki engine “MediaWiki”) had to wait for such an aid for a long time. Despite many initiatives, Wikipedians have had to craft their knowledge into articles without a visual editor until very recently. Finally there is now a visual editor in the Wikimedia projects (Extension: VisualEditor) available as a beta. This is updated each week and can generally be activated when the user wants it.

We present three editors below. There are further editor extensions listed, for example on mediawiki.org, however, they have generally been discontinued or are at least no longer being followed up. (To see a larger version of a screenshot, simply click on it).

 

Extension: Wiki Editor

The current editor in Wikipedia (MediaWiki) - as of September 2014

The current editor in Wikipedia (MediaWiki) – as of September 2014

 

This extension is currently being deployed and is delivered with MediaWiki from Version 1.18 on, in order to make editing a little easier. The essential functionality is to insert wikicode characters at the touch of a button, which then only need to be edited. Therefore, one does not need to remember the code, but one still has to understand it. This means it only makes editing easier under some conditions and is not a real WYSIWYG editor.

Extension: Visual Editor

The version of the "VisualEditor" currently (September 2014) on mediawiki.org.

The version of the “VisualEditor” currently (September 2014) on mediawiki.org.

There is no visual editor currently being delivered with MediaWiki. However, on the development platform “mediawiki.org“, there is a developer initiative for a rich-text editor for MediaWiki. There has been an initial beta version on this platform itself since 2013 with some of the essential functions, which, however, is targeted specifically for use in the Wikimedia project “Wikipedia”. This editor is now also available on all versions of Wikipedia as a beta feature for all users who are logged in.
The editor makes a very good impression, even though it is still obviously a beta version, and some essential functions like, for example, the table function, are missing – which for me is one of the main reasons for having a WYSIWYG editor. Here is a little information on a few select functions which I need in my everyday work:

Insert media

Dialogue for inserting media

Dialogue for inserting media

Inserting media is very easy here, as an initial selection of suitable pictures is filtered in advance from the system using the article title. This can be, but is not always, useful. Uploading pictures is just as laborious as before. One needs to change page, calling up the upload page which is separate.

This is rather annoying, particularly at the start. After time you get faster and keep the upload page constantly open in a separate tab, then you can save a lot of time with disconnected uploading. One can already insert templates via the visual editor presented on mediawiki.org.

 

Inserting links

Dialogue for inserting links

Dialogue for inserting links

This also seems very easy at first glance. Initially, only internal links are suggested, these being subdivided into new page, redirects, disambiguation pages and suchlike. What one does not see at first sight: if you enter the URL of an external page, this will be recognised and entered as an internal link.

If one begins to type a name in the field, but then interrupts this (for example by clicking outside the dialogue), then what you have typed will be accepted as what is known as a red link. You have to make sure that you remember to click on cancel in the dialogue.

Changing between WYSIWYG and code

Warning displayed when switching from WYSIWYG to Wikicode

Warning displayed when switching from WYSIWYG to Wikicode

Suppose I want to check or change something in the code and then carry on working in WYSIWYG. Then I have to save the page first and then reload it. I find this irksome.

 

Visual Editor from BlueSpice for MediaWiki

WYSIWYG editor in BlueSpice for MediaWiki

WYSIWYG editor in BlueSpice for MediaWiki

 

BlueSpice has come up with a fully developed WYSIWYG editor including table functions and business-specific adaptations. I am now writing a lot in Wikicode but the well-organized WYSIWYG editor is worth its weight in gold, especially when writing tables. Checkboxes and checklists can be inserted which is very helpful for company wikis with minutes and to-do lists. On top of this, the editor includes a spell checker from Version 2.22.2 on. You can also switch between WYSIWYG and wiki code whenever you like by pressing a button. For this reason we do not discuss this further here.

Insert Media

Dialogue for inserting, uploading and scaling images in BlueSpice

Dialogue for inserting, uploading and scaling images in BlueSpice

You can search for files you have uploaded in the dialogue for inserting pictures and other files. You can specify the size, link destination, borders, etc. before inserting a picture. Furthermore, there is an upload tool. This means you can upload a file, assign it a category, and insert it in two steps all on the same page. If you have the package [paste image], then images can even be pulled into the editor with drag and drop. The only annoying thing is that sometimes the picture you have inserted is not displayed with the right configuration immediately. However, one can see if everything looks right by going to the preview.

There is also a tool for inserting categories, like in the MediaWiki VisualEditor. However, in BlueSpice, this dialogue can also be called and used when in the reading view without having to change to the edit view.

 

Inserting links

The dialogue for inserting links in BlueSpice

The dialogue for inserting links in BlueSpice

The dialogue for inserting links is subdivided into several types of link. I can choose a namespace, article name, description, or enter one (for example when creating red links). If one chooses a namespace, then in the field underneath the pages will be automatically sorted for you to choose from. What is missing, in comparison to the MediaWiki editor is the differentiation for redirects and so forth. This, however, plays a much larger role in Wikipedia than in company wikis.

Working with tables

Inserting tables in BlueSpice

Inserting tables in BlueSpice

The number of rows and columns can be entered easily via the toolbar. If a table in the article is selected, then further table-specific functions are shown in the toolbar such as insert column or row.

The table can also be given a design (formatting), also just with a click in the toolbar. The table will then be given the correct properties, from colour or the possibility for the user to sort the contents to the properties of a normal contents table. As several designs can be used simultaneously, this can, however, sometimes lead to confusion.

Furthermore, the right mouse button lets you specify properties for the whole table, row, column or cell. You can also merge selected cells here. The width of columns can also be fixed, as a percentage of the browser width or as a number of pixels. However, be careful: it is not possible to define the column width for each row.

The table functions of this WYSIWYG editor are valuable when you need to create complex tables or for tables which need to be edited regularly (for example to-do lists).

 

Conclusion

The Wikimedia development team is on the right road. We (the development team at Hallo Welt! – Medienwerkstatt) are waiting eagerly for the day when we can switch to using the MediaWiki editor, as the development of a reliable editor is very time-consuming. At the moment, however, there is no way we could contemplate this. Directly comparing it with the visual editor from BlueSpice, we find that the BlueSpice editor has more of the important functions, particularly for enterprise wikis and came out of the beta phase a long time ago. Alongside this, the WYSIWYG editor from BlueSpice also works with Internet Explorer (IE 9 or higher). This is important for many companies, as the use of Internet Explorer is compulsory in many companies. IE compatibility is on the roadmap for the VisualEditor from MediaWiki, but it is not yet usable. The visual editor is initially not even activated in Internet Explorer.

One Comment to “MediaWiki WYSIWYG Editor – a close look on visual editors”

  1. […] years, already knows about the Visual Editor, which has now reached a certain maturity. (See the post by Nathalie Köpff on this subject). Creating such an editor is a big project. Unlike other web applications, an editor […]


Leave a Reply