MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Toolbar of the MDN editor

The editor's toolbar offers features that let you adjust the appearance and flow of the article as you work. This article describes each of the controls in the toolbar.

There are two rows of buttons and a third row that shows the context of HTML elements leading up to where you are. In the screenshot below, for example, you're writing inside a top-level <p> block.

Screenshot of the toolbar, with labels for the button groupsThe toolbar's buttons are divided into nine groups. Let's look at each; we will examine the buttons in each group in order left-to-right.

Document group

The document group provides options for document-level manipulations.

Source
The Source button lets you toggle between editing using the WYSIWYG interface and editing in raw HTML source mode. We strongly request that you try to avoid using source mode, as it's very easy to wind up with content that doesn't match our style guide or, worse, doesn't work right at all. Currently, though, the editor has some quirks that make it impossible to do certain things without resorting to source mode. See Using source mode in the MDN editor for details on how to use source mode and the dos and don'ts involved.
Publish
Just like the main Publish button.

If you try to save your edit and your changes are rejected as invalid, but the content is in fact appropriate for MDN, you should email the writing team for help getting your content posted.

Preview
Just like the main Preview button.

Edit functions group

The edit functions are similar to their corresponding options on a typical application's Edit menu.

Paste
Pastes the contents of the system clipboard into the editor pane.
Paste as plain text
Opens a dialog into which you can paste text; the text has all styling stripped from it so that you don't inadvertently introduce unwanted styles into the site content. Once you've pasted your text, you can (optionally) make changes, then click a button to insert it into the article you're working on.

When pasting content into MDN, please be aware that, if pasting styled content (including, for example, syntax highlighting in code being copied from another site), you may be bringing along unwanted and unneeded additional styles or classes. Please be careful not to do this; if necessary, review your edit in source mode to remove these unnecessary styles and classes (or check it before pasting, or use the "Paste as plain text" option instead).

Undo
Undoes the last operation.
Redo
Redoes the last undone operation.

Text processing group

The text processing group provides options for manipulating text.

Find
Opens the Find dialog box in "Find" mode, which lets you search your document for a specified string.
Replace
Opens the Find dialog box in "Find and replace" mode, allowing you to find strings and replace them with new ones.

The Find and Replace buttons both take you to the same dialog box, which offers several configurable options for finding and optionally replacing text.

Spell Checker
This button opens a menu with several items:
Enable SCAYT/Disable SCAYT
Activates or deactivates Spell Check As You Type (SCAYT)
Options
If SCAYT is activated, this opens the SCAYT dialog box to the tab containing options you can configure for SCAYT.
Languages
If SCAYT is activated, this opens the SCAYT dialog box to the Languages tab, where you can select what language to use for spell-checking dictionary.
Dictionaries
If SCAYT is activated, this opens the SCAYT dialog box to the Dictionaries tab, where you can specify a personal dictionary to use with SCAYT.
About SCAYT
If SCAYT is activated, this opens the SCAYT dialog box to the About tab.
Check Spelling
This opens a Spell Checker dialog box, in which you can check spelling in batch mode on an entire document. You can use the Grammar tab to check for grammar mistakes, or use the Thesaurus tab to search for synonyms of words in the document.

Display group

The display group provides options that affect the display of the editor interface.

Maximize
This button causes the editor interface (that is, the toolbar and the edit box) to take over your entire browser window, giving you as much space as possible to write.
Show blocks
This button causes outlines to appear around block elements in your document. This can be a handy way to check the document structure without going into source mode.

Inline styles group

The inline styles group contains common inline styles that you may wish to apply to chunks of text.

Bold
Toggles boldface text mode. It creates a <strong> element.
Italic
Toggles italic text mode. It creates an <em> element.
Underline
Toggles underlined text mode. It creates a <u> element.
Strike through
Toggles strikethrough mode. It creates an <s> element.
Subscript
Toggles subscript mode. It creates a <sub> element.
Superscript
Toggles superscript mode. It creates a <sup> element. Please note that we don't use footnotes on MDN, so you should rarely if ever need this button.
Remove format
Removes the current inline styles from the selection.
Code
Toggles code mode. It creates a <code> element. This is used for inline presentation of variable names, function names, object names, filenames, and so forth.

Hyperlinking group

The hyperlinking group provides options related to hyperlinking.

Link
Creates a new link. This button opens the link editor dialog, which is covered in Links using the toolbar.
Unlink
Removes the link at the insertion point.
Anchor
Creates an anchor at the insertion point. Note that you don't need an anchor to link to a heading; the MDN editor automatically creates an id for each heading that is the same as the heading text, with spaces replaced by underscores. For example, the heading of this section has an id whose value is Hyperlinking_group.
Create a redirect
Inserts a redirect from this page to another. See Creating redirects for further information.

Custom styles group

The Styles button is a drop-down menu offering a selection of special formatting options.

Block styles

None
Removes all styling from the current block.
Note box
Creates a note box, as seen below. You should always start a note box with "Note:" in bold letters.

This is a note box.

Warning box
Creates a warning box, as seen below. These should always begin with "Warning:" in bold letters.

Warning: This is a warning box.

Two columns
Makes the selected text or the current block two columns instead of one, on browsers that support it.
Three columns
Makes the selected text or the current block three columns instead of one, on browsers that support it.
Article summary
This style places its contents in a specially formatted call-out block that should contain a summary of the article. See the first paragraph of this article for an example.
Syntax box
Creates a syntax box, such as the one shown below. You need to use the "PRE" button as well, to create a <pre> block inside it. You probably won't see the yellow box until you do.
Hidden when reading
Creates a block that is visible only in edit mode, not when normally displayed. This is not the same as an HTML comment, which is visible only in source mode.

Inline styles

SEO summary
This special style is used to indicate a sentence or two that should be used as the article's summary for SEO purposes. It's also used by macros that automatically construct landing pages. If you don't specify this, MDN automatically uses the first paragraph of your article, but sometimes that's not the optimal text (or it's too much text), so this lets you override that.

Blocks group

The blocks group contains options for other block styles, some of which are standard HTML, and some of which are unique to Kuma.

Blockquote
Inserts a blockquote. Please do not use this. Blockquotes are not part of our standard style guide, and this button will be removed in the near future.
Preformatted Text
Inserts a <pre> block, or turns the current block into one. All code samples or examples of text output to a terminal should be in one of these blocks.
Headings
The heading buttons let you insert a heading. Click one of these buttons to create a new heading at the corresponding depth. By default, H2 through H4 are included in the table of contents, but you can change this, as described in the page info box.
Syntax highlighter
The syntax highlighter lets you choose a language for which to apply syntax highlighting to the <pre> (preformatted text) block; if you're not already in such a block, this will create one for you.  Choose the language used in the  block, and it will be highlighted appropriately.
Insert Code Sample Template
This button is used by the live sample system to help you quickly insert a new live sample. You don't need to use it, but it's there for convenience. See Using the live sample system for details on using this and other live sample features.
Insert Code Sample iFrame
Inserts into the document the appropriate macro to display a given live sample. See Using the live sample system for details on using this and other live sample features.

Lists and flow group

The block structures group provides options to create or modify standard block structures.

Insert/remove numbered list
Creates or removes a numbered list from your article. Once you're working in a numbered list, each time you press return, you will start a new bullet. The Tab key can be used to indent a level, and Shift + Tab will outdent a level. Pressing return on an empty bullet will exit numbered list mode. Right-clicking the list offers the option to open the properties dialog for the list; the properties include the style of the numbers (numbers, letters, Roman numerals, etc, and what number to start with).
Insert/remove bulleted list
Creates or removes a bulleted list from your article. Once you're working in a bulleted list, each time you press return, you will start a new bullet. The Tab key can be used to indent a level, and Shift + Tab will outdent a level. Pressing return on an empty bullet will exit bullet list mode. Right-clicking on the list lets you choose to edit the list's properties (specifically, the shapes of the bullets).
Definition List
Creates a new definition list. Definition lists consist of a series of titles and definitions (this list you're reading right now is an example).
Definition Term
Creates a new term block in a definition list. If you're not already editing a definition list, a new one is created for you. Pressing return after entering a definition title automatically starts you editing a definition description.
Definition Value
Creates a new value block in a definition list. Pressing return on a description line automatically starts a new title. Pressing return twice will exit definition list mode.
Decrease indent
Shifts the indentation level to the left once; this is the same as pressing  Shift + Tab while in a list.
Increase indent
Shifts the indentation level to the right once; this is the same as pressing tab while in a list.
Text direction left-to-right
Sets LTR as the current text typing direction. Used only when covering localization/internationalization topics. For example, if you are working in an Arabic document, you might use this to display some English text.
Text direction right-to-left
Sets RTL as the current text typing direction. Used only when covering localization/internationalization topics. For example, if you are working in an English text, you might use this to display some Arabic text.

Media group

The media group provides options for displaying or formatting media.

Image
Inserts a new image into the article. See Images  for details on how to use this option.
Table
Inserts a table into the article. See Tables for more information on tables in articles.
Embed YouTube Video
Opens a dialog box in which you can specify a YouTube URL. From this information it creates a call to the EmbedYouTube macro. This is a secure way to embed video content.
Insert MathML based on (La)TeX
Opens a dialog box in which you can insert code in TeX or LaTeX. This code will be converted into MathML and inserted into the document in a <math> block.

 

Document Tags and Contributors

 Contributors to this page: jswisher
 Last updated by: jswisher,