在MDN上编辑内容很轻松; MDN内置的 WYSIWYG 编辑器，能让你在网站的几乎所有位置创建、编辑、修改文章或其他页面. 编辑器窗口，如下所示，包含八个关键区域. 这部分将提供每个区域的信息，以便您了解如何使用整个编辑环境.
Note: 我们不断努力改进MDN，所以有时候这个文档或下面的屏幕截图可能会稍微过时. 不过，我们会定期更新此文档，以避免其无法使用.
- 保存页面不需要关闭编辑器; 这样你可以阶段性的保存你的工作, 如果有需要，或者你需要中断当前编辑过段时间再继续，你可以在页面的历史记录中创建一个可以恢复的条目. 在创建新页面时这样做是不允许的. 参照The revision comment box 了解如何在已保存的文章中包含修订注释.
- 保存页面并退出编辑器, 返回标准浏览模式查看页面. 参照The revision comment box 了解如何在已保存的文章中包含修订注释..
- 打开一个新的选项卡或窗口显示页面，使它即使存在于编辑器中，也如同您正在浏览的那样呈现。这包括执行您在内容中使用的任何宏。 使用此选项时，您的工作不会保存。 这样，您可以检查以确保您的宏语法或其他可能会阻止页面呈现正确的格式的错误。
- 取消编辑，您所做的任何更改都不保存。 您将以标准浏览模式返回页面.
页面信息框包含有关页面的信息，也可以扩展提供其他页面控件。 默认情况下，它显示页面的标题以及保存本地草稿的日期和时间; 存储在计算机上的本地草稿将用作备份，以防您意外离开编辑器或浏览器崩溃。
你可以点击 "Edit Page Title and Properties" 切换到有其他页面控件的视图. 这个视图看起来像这样:
在这个视图你可以修改网页的显示标题和页面目录的深度。 显示标题是浏览器标题栏（或标签栏）中显示的标题，以及文章顶部和面包屑栏中的页面标题（视情况而定）。 它不会影响页面的URL.
Note: 注意：短的URL和描述性的标题更好; 例如，关于Kuma API的文章标题为“The Kuma API”，但其URL（站点根目录之后）是Project：MDN / Kuma / API，其中“API”表示此页面.
编辑器的工具栏提供了一些可让您在工作时调整文章的外观和流程的功能。 工具栏有两行按钮（如果您的窗口的宽度很窄，它们会折行显示，但通常为两行），第三行则显示HTML元素的层次结构，显示您当前位置。 例如，在下面的截图中，您正在对body内直接的
- 源模式切换按钮允许你选择在所见即所得模式编辑或者在HTML源码模式进行编辑. 我们强烈建议你尽量不要使用源代码模式, 使用源码很容易导致文档以不符合我们指南风格的形式收场，更甚者，它根本起不到任何作用. 尽管目前编辑器表现的还是有些怪异，因为没有源码编辑模式，它就不能正常工作
- 文档中"保存并继续编辑" 按钮的副本
- 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.
- Paste from Word
- On Windows, lets you paste text from Microsoft Word and have it adjusted to work reasonably well in MDN's wiki. We prefer for you to not use this (the results will work but are not typically style guide compliant), but it's there for a few teams that need it.
- Check spelling
- Starts the spell checker.
- Spell check as you type
- Presents a submenu that lets you control and configure the as-you-type spell checker.
- Opens the Find panel in "Find" mode, which lets you search your document for a specified string.
- Opens the Find panel in "Find and replace" mode, allowing you to find strings and replace them with new ones.
It's worth noting that the Find and Replace buttons both take you to the same dialog box, which offers several configurable options for finding and optionally replacing text.
These buttons provide options affecting or creating blocks in your article.
- 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).
- 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).
- 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 title
- Creates a new title 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 description
- Creates a new description 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 shift-tab while in a list.
- Increase indent
- Shifts the indentation level to the right once; this is the same as tab while in a list.
- 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.
- Inserts a new image into the article. See Adding images to an article below for details on how to use this option.
- Inserts a table into the article. See Working with tables for more information on tables in articles.
- Text color
- Lets you set the text foreground color. Please do not use this. We will switch to using CSS styles for all coloring soon.
- Background color
- Lets you set the text background color. Please do not use this. We will switch to using CSS styles for all coloring soon.
- Text direction left-to-right
- Sets LTR as the current text typing direction. Used only when covering localization/internationalization topics.
- Text direction right-to-left
- Sets RTL as the current text typing direction. Used only when covering localization/internationalization topics.
This is an odd box, in that it consists of just one button: 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.
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.
The next box is a drop-down menu offering a selection of special formatting options. These are:
- 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.
Note: 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.
foo = bar()
- Callout box
- Creates a new callout box. We are phasing this kind of box out in favor of a new design, so it shouldn't be used for new content.
- 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.
- 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.
- Right sidebar
Special noteCreates a light grey sidebar that floats to the right of content. You may enter small amounts of text in these boxes to draw special attention to them.
This is a right sidebar.
- 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.
Code samples and redirects
These buttons are mostly used for providing preformatted text (usually code samples), but our "insert redirect" button is, for some reason, here too.
- Inserts a
<pre>(preformatted text) 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.
- 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. Simply choose the language and you're good to go.
- 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 an
<iframe>into the document, displaying a given live sample. See Using the live sample system for details on using this and other live sample features.
- Create a redirect
- Inserts a redirect. See Creating redirects for further information.
Inline styles and links
The final group of toolbar buttons includes options for creating and maintaining links and anchors, as well as for applying inline styles to content.
- Creates a new link. This button opens the link editor dialog, which is covered under Creating and editing links below.
- Removes the link at the insertion point.
- Creates an anchor at the insertion point.
- Toggles boldface text mode.
- Toggles italic text mode.
- Toggles underlined text mode.
<code>mode. This is used for inline presentation of variable names, function names, object names, filenames, and so forth.
- Strike through
- Toggles strikethrough mode.
- Toggles superscript mode. Please note that we don't use footnotes on MDN, so you should rarely if ever need this button.
- Remove format
- Removes the current formatting from the selection.
- Align left
- Makes the current block left-aligned. Please do not use this. We will be using CSS styles for all alignment tasks starting very soon.
- Centers the current block. Please do not use this. We will be using CSS styles for all alignment tasks starting very soon.
- Align right
- Makes the current block right-aligned. Please do not use this. We will be using CSS styles for all alignment tasks starting very soon.
The edit box
The edit box is, of course, where you actually do your writing. Right-clicking in the edito box will offer appropriate additional options depending on the context of your click; clicking in a table will offer table-related options and clicking in a list will offer list-related options, for example.
The revision comment box
After you've made your changes, it's strongly recommended you add a comment to your revision. This is displayed in the revision history for the page, as well as on the Revision Dashboard. It helps to explain or justify your changes to others that may review your work later. To add a revision comment, simply type the note into the revision comment box before clicking either of the save buttons at the top of the page.
Note: We know that the revision comment box being so far away from the save buttons doesn't make any sense. We're working on design changes that will fix that.
The tags box
Page tags help categorize and organize information, and help us identify pages that need special attention. Tags are also used to mark pages that are obsolete and may need to be deprecated or even deleted. It's incredibly useful to have good, clean tags on pages, so be sure to have good tags on articles you contribute to.
The tag box is near the bottom of the editor page, and looks like this:
Adding a tag
To add a new tag, simply click in the box and start typing:
Here we see the three already existing tags (as button-like objects) and our new tag as unadorned text. When we press Enter or Tab key (or comma), the new tag is committed to the list, and the list looks like this:
For a list of recommended tags, as well as a usage guide for specific tags, please see MDN tagging standards.
Removing a tag
There are two ways to remove a tag: you can click on the "x" icon next to its name in its button, or you can click to its right in the editor box and press the delete key on your keyboard.
Committing your changes
Your changes are not saved unless you click one of the save buttons at the top of the editor window. Scroll back to the top of the window if you don't see the buttons, then click one of the two green save buttons. Now your change has been committed.
The reviews box
MDN uses reviews to try to monitor and improve the quality of its content. This works by setting a flag on an article indicating that a review is needed. You can learn more about technical reviews and editorial review in the How to guides.
To request a review on the article you've worked on, simply toggle on the checkbox next to the type of review that's needed. Technical reviews should be requested any time you make changes to the explanation of how something technical works, while editorial reviews are a good idea when you've made changes and would like someone to review your writing and style choices.
Be sure to click one of the save buttons after making your selections, to commit your review request.
The attachments box
The attachments box lets you upload files to MDN for use in MDN content, as well as see what files are being used by the current document.
Note: Due to a quirk in our current implementation, files are not associated with pages unless they're actually used in the page. So if you upload an attachment and don't make use of it before you save the article, it will not appear on the attachments list. So be sure to link to it or embed the image right away.
To add an attachment to the page, simply click the "Attach Files" button; this expands the attachment box to look like this:
As you see, there's a table that lets you select a file to upload, then give it a title and, optionally, a description and an additional comment. The title is mandatory, and should describe the file so its usage context is understandable. Once the fields are filled out and you've selected your file, click the "Upload" button to send it to MDN.
Note: Only a select few types of files are permitted as attachments on MDN: GIF, JPEG, PNG, SVG, and HTML. Photoshop images are permitted but should be avoided except in very specific cases. Any other file types will not be allowed by the upload form.
Feel free to open this page in the editor and look at its attachment list at the bottom to get a feel for it.
Once a file has been attached, it will appear (by its title, as you specified in the form) in the image properties dialog box when using images in your article. See Adding images to an article for details on this interface. To link to other types of files, copy the URL from the attachments box and use that as your link target when adding links to the page using the link button in the toolbar.
There are a number of convenient keyboard shortcuts available to help you avoid taking your hands off the keyboard while you work. The shortcuts are listed for Windows and Linux; on Mac, instead of using the Control key, you can use the Command key.
|Ctrl-C||Copy to clipboard|
|Ctrl-V||Paste from clipboard|
|Ctrl-K||Open link editor|
|Ctrl-Shift-O||Toggle source view mode.|
|Ctrl-S||Save changes and close the editor|
|Ctrl-Shift-S||Save changes without closing the editor|
|Ctrl-2 through Ctrl-6||Select header level 2-6|
|Ctrl-Shift-L||Toggles between bulleted list, numbered list, and paragraph format|
|Tab||Increases indent level if in indent mode, otherwise inserts two spaces as a tab. Inside tables, this jumps to the next cell, or inserts a new row if there is no next cell. If the cursor is currently in the page title or in a header, the cursor jumps to the next paragraph.|
|Shift-Tab||Decreases indent level if in indent mode. Inside tables, this jumps to the previous cell, or inserts a new row if there is no previous cell. If the cursor is currently in the page title or in a header, the cursor jumps to the next paragraph.|
|Shift-Space||Inserts a non-breaking space (
Exits out of the current block. For example, if you're currently editing a
Note: Not currently implemented; see bug 780055.