User:Shaded0/Draft:VisualEditor

From Wikipedia, the free encyclopedia
Jump to navigation Jump to search

VisualEditor gives you the ability to edit without needing to learn wikitext markup, as is required by the default wikitext editor. Unlike that editor, VisualEditor will display the text being edited almost as if it were already saved. This guide gives illustrated, step-by-step instructions on the editor's features, although it may occasionally lag behind the release of new ones. Visual editor can be used on User and Article pages, but not Talk pages.

Also important, if you run into any edit conflicts, please see Help on Edit conflicts.

Enabling Visual Editor[edit]

If you are registered on Wikipedia, you can enable VisualEditor by clicking the hyperlink for changing your preferences. You'll need a VisualEditor-supported browser; most are. More information can be found here.

If you are not registered, you can still use VisualEditor by adding ?veaction=edit to the end of a Wikipedia page URL. (Registered editors who have not enabled VisualEditor in their preferences - that is, the box for "Temporarily disable the visual editor while it is in beta" option is checked - can do the same.)

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.

VisualEditor edit tab-en.png

The VisualEditor toolbar[edit]

Screenshot of the VisualEditor toolbar
VisualEditor - Toolbar - Undo-redo.png
Undo and Redo the changes you have made.
VisualEditor Toolbar Formatting-en.png

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 (VisualEditor MediaWiki theme clear icon bitmap.png), 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.

VisualEditor - Toolbar - Linking.png
Linking tool: The chain icon is the linking tool. Clicking on it (usually after selecting some text) opens the link dialog.
VisualEditor citoid Cite button.png
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.

VisualEditor Insert Menu-en.png
Insert: The "Insert" menu may be different on some projects. Below is a list of all options that may appear.
  • The "Media" icon (a picture of mountains) opens the media dialog.
  • The "Template" icon (a puzzle piece) allows you to edit templates.
  • The "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 "Save page" 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.
VisualEditor toolbar actions-en.png
Pressing the green "Save page" 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 save dialog-en.png

Editing links[edit]

VisualEditor - Toolbar - Linking.png
Links can be added through the "Link" icon (links in a chain) in the toolbar, or by using the shortcut Ctrl+K (or ⌘ Command+K on a Mac).

If you select (highlight) text and then press the "Link" button, that text will be used in creating the link. For a link that involves just one word, you can either select that word or just put the cursor within that word.

VisualEditor-link tool-search results.png
When you use either the button or the shortcut, a dialog will open in which you may type the link.

VisualEditor will try to help with internal links by looking for likely matches.

VisualEditor link tool 2015.png
Once you have entered or selected the link, you complete the linking process by pressing ↵ Enter or by pressing the "Done" button. Your link will immediately appear on the VisualEditor page, but as with other changes to the page, it will not be saved until you save the entire page.

Editing lists[edit]

VisualEditor Toolbar Lists and indentation-en.png
You can use VisualEditor to create lists, or to change the format of an existing list. There are two types of lists: unordered (bullet) and ordered (numbered).

To start a new list, just click on one of the two menu items shown here. Or, if you already have typed the list (on separate lines), select (highlight) the list you have typed, then click on one of the menu items.

VisualEditor lists 3 select to indent.png
If you want to change the indentation level of part of an existing list, select the part of the list that you want to change.

Keyboard shortcuts[edit]

Many editors are used to entering wikitext directly, especially bold, italics and wikilinks. Keyboard shortcuts allow to quickly insert similar formatting without having to use toolbar items. Here are the common general shortcuts in VisualEditor:

PC shortcut Action Mac shortcut

Ctrl+B Bold ⌘ Cmd+B

Ctrl+I Italics ⌘ Cmd+I

Ctrl+K Insert link ⌘ Cmd+K

Ctrl+X Cut ⌘ Cmd+X

Ctrl+C Copy ⌘ Cmd+C

Ctrl+V Paste ⌘ Cmd+V

Ctrl+Z Undo ⌘ Cmd+Z