当前位置：文江博客知识库 en-US 文档 MDN Contribute Editor Basics Toolbar

Toolbar of the MDN editor - The MDN project 编辑

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  block.

Screenshot of the toolbar, with labels for the button groups The 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
Edit functions
Text processing
Display
Inline styles
Hyperlinking
Custom styles
Blocks
Lists and flow
Media

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  element.
Italic: Toggles italic text mode. It creates an  element.
Underline: Toggles underlined text mode. It creates a  element.
Strike through: Toggles ~~strikethrough~~ mode. It creates an <s> element.
Subscript: Toggles subscript mode. It creates a  element.
Superscript: Toggles superscript mode. It creates a  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 codemode. 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.