Extension:VisualEditor/Skin requirements

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

VisualEditor's MediaWiki extension is mainly designed to work with the Vector, MonoBook, Timeless and Minerva skins, given the initial intent to work for the Wikimedia production site. However, it should be relatively easy to ensure your skin works with VisualEditor, especially if it is Vector-based.

Requirements

VisualEditor requires the following elements on the page to function:

[data-mw-ve-target-container] (since MW 1.39) or #content serves as the main container for the editor. The toolbar will be attached here.
#mw-content-text serves as the editable area. It must be a descendant of the container above. Other descendants are greyed out and non-interactive while the editor is active.
#ca-edit serves as the entry point – clicking it will open the editor.

Recommendations

VisualEditor interacts with the following elements if they are available, but should not have any problems if they are not (beyond the relevant functionality being missing):

#firstHeading is updated with the page title (respecting DISPLAYTITLE) after the page is saved and when launching the editor from the wikitext edit form.
#contentSub is updated with the redirect status dynamically when the redirection is changed and after the page is saved.
.mw-editsection links are modified to allow launching the visual editor. The default structure (as in Skin::doEditSectionLink) is expected, if they are present.
#footer-info and #footer-info-lastmod are updated with the modification time after the page is saved.
The IDs of content actions' links should begin with ca-. Several content action links are modified or otherwise taken into account when present (#ca-viewsource, #ca-addsection, etc.).
The IDs of toolbar links should begin with t-. #t-permalink is updated after the page is saved.
The IDs of portlets (sidebar sections and other navigation menus) should begin with p-. Tabs in #p-views have the .selected class added/removed when the editor launches.
#catlinks serves to open the category editing dialog, and is updated dynamically when categories are edited and after the page is saved.
Some elements that could interfere with the toolbar are hidden while the editor is active, including #siteNotice and .mw-indicators.

Future

In future, we will probably generalise VisualEditor's MediaWiki extension to be pluggable into new skins. Suggestions as to how best to do this efficiently are welcome.