Help:VisualEditor/User guide/en

 If you would like to try VisualEditor without editing an article, here is a page where you can freely do so. You don't need an account to use it.



Opening VisualEditor


Getting started: the VisualEditor toolbar




Saving changes


Editing links


Editing images and other media files


Editing and inserting galleries


Editing references
{| cellpadding="15"
 * colspan=2 |
 * colspan=2 |

Editing an existing reference

 * colspan=2 |
 * VisualEditor - Editing references 1.png
 * To edit an existing reference, click on it in the text, and click on the "" icon (bookmark) that appears near it, or the one in the toolbar.
 * colspan=2 |
 * VisualEditor - Editing references 6.png
 * Clicking on the "" icon opens a dialog that includes a mini-editor, where you can edit the reference's text.
 * colspan=2 |
 * VisualEditor - Editing references 6.png
 * Clicking on the "" icon opens a dialog that includes a mini-editor, where you can edit the reference's text.
 * Clicking on the "" icon opens a dialog that includes a mini-editor, where you can edit the reference's text.

You can format it as you would in the rest of the page, for example to add italics or links.
 * colspan=2 |
 * VisualEditor - Editing references 3.png
 * Many wikis use templates to format references according to a specific standard. You will notice this if you edit an existing reference whose content turns blue when you select it.
 * VisualEditor - Editing references 3.png
 * Many wikis use templates to format references according to a specific standard. You will notice this if you edit an existing reference whose content turns blue when you select it.

Click on the Template icon (puzzle piece) to edit the content of the template.
 * colspan=2 |
 * VisualEditor - Editing references 5.png
 * Clicking the Template icon (puzzle piece) allows you to edit the template's individual parameters.
 * colspan=2 |
 * VisualEditor - Apply changes.png
 * Click on "" when you're done, and you'll go back to the reference editor.
 * colspan=2 |
 * VisualEditor - Apply changes.png
 * Click on "" when you're done, and you'll go back to the reference editor.
 * Click on "" when you're done, and you'll go back to the reference editor.

If there is nothing more to edit, click on "" again to return to the page.
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |

Reusing an existing reference

 * colspan=2 |
 * VisualEditor references more.png
 * If the page already contains references, you can choose to reuse an existing citation, if it applies to the text you want to source.
 * VisualEditor references more.png
 * If the page already contains references, you can choose to reuse an existing citation, if it applies to the text you want to source.

To reuse an existing reference, place your cursor where you want to add it in the text, and click on the "" icon (bookmark) from the "" menu. Look for the reference you want to reuse in the list, and select it.
 * colspan=2 |
 * VisualEditor - Editing references 21.png
 * In the reference editor, click on the button that says "", in the bottom left corner of the window.
 * colspan=2 |
 * VisualEditor - Editing references 18.png
 * If there are many references, you can use the search bar (labeled "") to only display references that match a given text.
 * colspan=2 |
 * VisualEditor - Editing references 18.png
 * If there are many references, you can use the search bar (labeled "") to only display references that match a given text.
 * If there are many references, you can use the search bar (labeled "") to only display references that match a given text.
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |

Adding a new reference

 * colspan=2 |
 * VisualEditor references more.png
 * To add a new reference, place your cursor where you want to add it in the text, and click on the "" icon (bookmark) in the "" pulldown on the toolbar.
 * colspan=2 |
 * VisualEditor - Editing references 20.png
 * In the reference editor, you can add, edit and format your citation.
 * colspan=2 |
 * VisualEditor - Editing references 20.png
 * In the reference editor, you can add, edit and format your citation.
 * In the reference editor, you can add, edit and format your citation.

You can make the reference belong to a given group; this is used to display groups of references with the "" tool.
 * colspan=2 |
 * VisualEditor reference toolbar transclusion.png
 * If you're adding a new reference and you want to include a template in it, click the Template icon (puzzle piece) in the pulldown "" toolbar of the reference editor.
 * colspan=2 |
 * VisualEditor - Editing references 9.png
 * Then, look for the template you want to use, add it and edit it as you would an existing one.
 * colspan=2 |
 * VisualEditor - Editing references 9.png
 * Then, look for the template you want to use, add it and edit it as you would an existing one.
 * Then, look for the template you want to use, add it and edit it as you would an existing one.

Click on "" to return to the reference editor, and "" again to return to the page.
 * colspan=2 |
 * VisualEditor - Editing references 10.png
 * If there isn't already a list of references on the page (for example, if you're adding the first reference of the page), you need to add it in order for the text of your reference to be displayed.
 * VisualEditor - Editing references 10.png
 * If there isn't already a list of references on the page (for example, if you're adding the first reference of the page), you need to add it in order for the text of your reference to be displayed.

Place the cursor where you want to display references (usually at the bottom of the page), and click the "" icon (three books) to add it.
 * colspan=2 |
 * VisualEditor - Editing references 11.png
 * To simply add a references list, click "" on the dialog.
 * VisualEditor - Editing references 11.png
 * To simply add a references list, click "" on the dialog.

If you created groups of references, you can specify a group in this dialog, to selectively display references that belong to it.
 * }
 * }



Editing templates
{| cellpadding="15"
 * To add a new template to the page, place your cursor where you want the template to be inserted, and click on the "" icon (puzzle piece) in the "" pulldown menu on the toolbar.
 * VisualEditor Insert transclusion.png
 * colspan=2 |
 * Enter the name of the template you want to insert, and click "".
 * VisualEditor - Template editing 4.png
 * colspan=2 |
 * You can also edit templates that are already on the page by selecting them (they turn blue), and clicking on the "" icon (puzzle piece) that appears, or the one in the toolbar.
 * VisualEditor - Template editing 1.png
 * colspan=2 |
 * Adding a new template or opening an existing one opens the "" dialog, with a list of individual parameters and their values (if the template has already been updated to contain TemplateData information; otherwise, a link to the documentation will be available in the dialog).
 * You can also edit templates that are already on the page by selecting them (they turn blue), and clicking on the "" icon (puzzle piece) that appears, or the one in the toolbar.
 * VisualEditor - Template editing 1.png
 * colspan=2 |
 * Adding a new template or opening an existing one opens the "" dialog, with a list of individual parameters and their values (if the template has already been updated to contain TemplateData information; otherwise, a link to the documentation will be available in the dialog).
 * colspan=2 |
 * Adding a new template or opening an existing one opens the "" dialog, with a list of individual parameters and their values (if the template has already been updated to contain TemplateData information; otherwise, a link to the documentation will be available in the dialog).
 * Adding a new template or opening an existing one opens the "" dialog, with a list of individual parameters and their values (if the template has already been updated to contain TemplateData information; otherwise, a link to the documentation will be available in the dialog).

You can add parameters or edit those already listed.
 * VisualEditor - Template editing 2.png
 * colspan=2 |
 * To change a parameter's value, select the parameter in the list, and edit its value in the adjacent window.
 * VisualEditor - Template editing 3.png
 * colspan=2 |
 * When a template embeds other templates, these sub-templates will appear inside the parameters that display them. They can be edited or removed inside the parameter field.
 * colspan=2 |
 * When a template embeds other templates, these sub-templates will appear inside the parameters that display them. They can be edited or removed inside the parameter field.
 * When a template embeds other templates, these sub-templates will appear inside the parameters that display them. They can be edited or removed inside the parameter field.
 * When a template embeds other templates, these sub-templates will appear inside the parameters that display them. They can be edited or removed inside the parameter field.

New sub-templates are added by following the steps of adding a parameter. You may need to check the template documentation to make sure that the sub-template is supported.
 * VisualEditor - Template editing 5.png
 * colspan=2 |
 * When you're done, click "" to close the dialog and return to the page editor.
 * VisualEditor - Apply changes.png
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |

Substituting templates

 * colspan=2 |
 * When a template must be substituted, type  (colon included) before the template's name.
 * When a template must be substituted, type  (colon included) before the template's name.
 * When a template must be substituted, type  (colon included) before the template's name.

Autocompletion doesn't work with ; if you need the autocompletion, add   only after finding the template you're looking for.

Then, click the green "" button.
 * VisualEditor - Template editing 7.png
 * colspan=2 |
 * Add any parameters as usual and "".
 * VisualEditor - Template editing 6.png
 * colspan=2 |
 * You will not see the template expand on the page during this initial phase.
 * VisualEditor - Template editing 8.png
 * }
 * You will not see the template expand on the page during this initial phase.
 * VisualEditor - Template editing 8.png
 * }
 * }
 * }



Editing categories


Editing page settings


Editing mathematical formulae
The formula editor is still under development, so on some wikis you may need to opt-in to the formula editor to use it. To do this, click on "Beta" in your personal tools in the top right of any wiki page, check the box next to "VisualEditor formulae editing", and press "Save" at the bottom of the page.



Editing mathematical formulae and other special items
Some items, such as image galleries, mathematical formulae and music scores aren't yet supported by VisualEditor. Until they are, you will need to edit the source wikitext directly if you want to alter or add these.



Keyboard shortcuts
Many editors are used to entering wikitext directly, especially bold, italics and wikilinks. Keyboard shortcuts allow to quickly insert similar formatting without having to click the toolbar buttons. Common general shortcuts, and ones used by other editors, function in VisualEditor: