User:2TeachWiki/Visual Editor

From Wikipedia, the free encyclopedia
AboutWikipedia BasicsGetting StartedLet's Edit!VisualEditor

VisualEditor gives you the ability to edit without needing to learn wikitext markup, as is required by the default wikitext editor.

VisualEditor is still in development and has known limitations and bugs.

Wikipedia already has a great guide on the VisualEditor - follow it here Wikipedia:VisualEditor/User_guide

Enabling VisualEditor[edit]

  1. Login to your Wikipedia account
  2. Go to Prefrences Editing Tab
  3. Uncheck Temporarily disable the visual editor while it is in beta
  4. Change Editing mode to Show me both editor tabs
  5. Save your preferences

Availability[edit]

VisualEditor is available on the following types of pages (namespaces):

  • Article ("mainspace")
  • User
  • Category
  • Help
  • File (but not with files, or other pages, at Wikimedia Commons)

Opening VisualEditor[edit]

To edit a page using VisualEditor, click on the "Edit" tab at the top of the page.

It can take a few seconds for the page to open for editing, and longer if the page is very long.

Clicking on the "Edit source" tab will open the classic wikitext source editor.


You can also open VisualEditor by clicking on the "edit" link on each section.

Getting started: the VisualEditor toolbar[edit]

Screenshot of the VisualEditor toolbar
The VisualEditor toolbar appears at the top of the screen when you begin editing. It includes some familiar icons:

Undo and Redo the changes you have made.

Headings pull-down menu: allows you to change how the paragraph is formatted. To change the style of a paragraph, put your cursor in the paragraph and select an item in this menu (you don't have to highlight any text). Section titles are formatted "Heading", and subsections are "Heading 2", "Heading 3", and so on. The normal format for text is "Paragraph".

Formatting: Clicking the "A" opens a menu.

  • The "Bold" item (B) bolds the selected text.
  • The "Italic" item (I) italicizes the selected text.
  • The "Superscript" item (x2) causes the selected text to appear smaller than surrounding text and to be slightly higher than the surrounding text.
  • The "Subscript" item (x2) causes the selected text to appear smaller than surrounding text and slightly lower than the surrounding text.
  • The "Strikethrough" item (S) adds a solid bar through the selected text.
  • The "Computer code" item (a set of curly brackets: {}) changes the font of the selected text to a monospaced font, which sets it apart from surrounding (proportionally spaced) text.
  • The "Underline" item (U) adds a solid line beneath the selected text.
  • The "Language" item (Aあ) allows you to label the language (for example, Japanese) and direction (for example, right-to-left) of the selected text.
  • The final item (), called "Remove", removes all character formatting from the selected text, including links.

If you have not selected any text, then when you click the "A" to open the menu, and then select an item, that formatting will apply to the text that you start typing, from wherever your cursor is located.


Linking tool: The chain icon is the linking tool. Clicking on it (usually after selecting some text) opens the link dialog.

Cite menu: The "Cite" menu is used to add inline citations (also called "footnotes" or "references"). All projects have access to "Basic" reference formatting and the ability to "Re-use" citations, using this menu. This menu also gives you quick access to local citation templates, if these are enabled on your wiki.

(Instructions for adding local citation templates to the Cite menu at a specific wiki are available at VisualEditor/Citation tool.)


Cite button: If the citoid service is enabled on your wiki, then you will see a "Cite" button instead of a Cite menu.

The citoid service tries to fill out citation templates automatically.


Lists and indentation: The first two items allow you to format text as either a "Bullet list" or a "Numbered list". The last two items allow you to decrease or increase the indentation level of list items.

Insert: The "Insert" menu may be different on some projects. Below is a list of all options that may appear.
  • The "Images and media" icon (a picture of mountains) opens the media dialog.
  • The "Template" icon (a puzzle piece) allows you to edit templates.
  • The "Invisible comment" item (a speech balloon) allows you to insert comments that are not visible to readers; these comments can be seen only when in edit mode and are then indicated by an exclamation mark icon.
  • The table item allows you to insert a table.
  • The "⧼visualeditor-mwgalleryinspector-title⧽" icon (a set of photos) allows you to insert a gallery to the page.
  • The "⧼math-visualeditor-mwmathinspector-title⧽" icon (Σ) opens the formula inserter dialog.
  • The "Hieroglyphs" icon (an ankh symbol - ☥) allows you to enter the hieroglyphics inserter. (See below.)
  • The "⧼visualeditor-dialogbutton-referenceslist-tooltip⧽" icon (three books) opens a dialog in which you can specify where will references be displayed to the reader. Usually this only needs to be done once on every page.

Saving changes[edit]

When you're done editing, click the blue "⧼visualeditor-toolbar-savedialog⧽" button in the toolbar. If you have made no changes, the button will be disabled (grayed out). To cancel all your editing changes, just close your browser window.

Pressing the green "⧼visualeditor-toolbar-savedialog⧽" button opens a dialog. You can then enter a brief summary of your actions, mark your edit as minor, and add the page to your Watchlist. The box for the summary is the equivalent of the Edit summary (Briefly describe your changes) field in the wikitext editor.

You can also review your changes using the "Review your changes" button to be sure they will work as intended before saving your changes. This is similar to the "Show changes" button in the wikitext editor.

The "Resume editing" button returns you to the page you were editing. You can save all of your changes later.

VisualEditor Complete User Guide[edit]

A full user guide is available at Wikipedia:VisualEditor/User_guide