The MDN editing interface

  • Revision slug: Project:MDC_editor_guide
  • Revision title: MDC editor guide
  • Revision id: 72610
  • Created:
  • Creator: Zearin
  • Is current revision? No
  • Comment no wording changes

Revision Content

The WYSIWYG (what-you-see-is-what-you-get) editor offered by MDC makes it easy to contribute new content to the Mozilla Developer Center.  This article provides some information on how to use the editor, as well as some information about helpful features that may improve your productivity.

Keyboard shortcuts

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 Macs, instead of using the Control key, use the Command key (⌘).

Shortcut Description
Ctrl-A Select all
Ctrl-C Copy to clipboard
Ctrl-V Paste from clipboard
Ctrl-X Cut
Ctrl-Z Undo
Ctrl-Y Redo
Ctrl-K Open link editor
Ctrl-W Turn the selected text into a link without using the link editor. Note that this sets the link to be the same as the text, which may not be what you really want (since usually you need to prepend the language code to the article's name).
Ctrl-B Bold
Ctrl-I Italic
Ctrl-U Underline
Ctrl-Shift-S Save changes
Ctrl-Alt-Enter Fit window
Ctrl-L Justify left
Ctrl-R Justify right
Ctrl-E Justify center
Ctrl-J Justify fully
Ctrl-1 through Ctrl-5 Select header level 1–5
Ctrl-0, Ctrl-N Paragraph format
Ctrl-Shift-L Toggles bulleted list / numbered list / 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 ( )
Shift-Enter Exits out of the current block.  For example, if you’re currently editing a <pre> block, Shift-Enter exits the block, putting you back in the body of the article.

Including a revision note

When saving your change, it’s helpful if you include a note explaining why you made the change. Enter some text in the “Edit summary” box below the editor before saving your change.

There are a few reasons this is helpful:

  • If the reason for your change isn’t obvious, your note can explain the reasoning to others.
  • If your change is technically complex, it can explain to editors the logic behind it.  This can include a bug number, for example, that editors can refer to for more information.
  • If your edit involves deleting a large amount of content, you can justify the deletion (for example, “I moved this content to article X”).

Linking

There are some templates that make it easy to create in-page links. For example, you can link to a section with a given name using the anch template, like this:

{{anch("Including a revision note")}}

This inserts an anchor like this: {{ anch("Including a revision note") }}.

When writing interface documentation, and you need to link to a method within the current article, you can use the manch template, like this:

{{manch("methodName")}}

This looks like this: {{ manch("methodName") }}.

Deleting a page

If you come upon a page that needs to be deleted for any reason, simply add the tag “junk” to it. A helpful MDC administrator will remove the page shortly thereafter.

What are good reasons to mark a page for deletion?

  • The page was created by accident and has no content
  • The page’s contents were merged with another article
  • The page is spam
  • The page’s contents are so woefully obsolete as to be dangerous

Useful DekiScript commands

Sometimes, it’s useful to take advantage of special DekiScript commands to improve the look and feel of your content.

Ensuring that full links are displayed inline

By default, the MindTouch wiki truncates lengthy URLs when displaying them in the bodies of articles. This is not typically what we want. If you find this is happening to you, you can use the web.link command to embed the full URL, like this:

Truncated
http://www.bitstampede.com/2009/06/0...atures-on-mdc/
Inlined
{{ web.link("http://www.bitstampede.com/2009/06/04/more-new-features-on-mdc/") }}

This is done by using the text {{web.link("http://www.bitstampede.com/2009/06/04/more-new-features-on-mdc/")}}.

Using syntax highlighting

MDC supports syntax highlighting for code samples.  To use it, the first step is to insert the code sample into the document:

void main(int argc, char **argv) {

printf("Hello world\n");

}

The second step is to select the text and change the Format in the toolbar to “Formatted”.

void main(int argc, char **argv) {
  printf("Hello world\n");
}

The third step is to use the Transformation menu to select the language corresponding to the syntax highlighting you wish to apply.  In this case, we'll use the C++ syntax highlighter.

void main(int argc, char **argv) {
  printf("Hello world\n");
}
Note: The editor does not display the syntax highlighting.  You'll need to save your changes and look at the article to see the syntax highlighting in effect.

Accessing your browser’s standard contextual menu

By default, the editor uses its own contextual menu when you right-click on the editor. To access your browser’s default contextual menu (such as to access the Firefox spell checker’s list of suggested corrections), hold down the Control key while clicking.

The toolbar

Note: The editor toolbar is currently undergoing a redesign, and may change over the next few days.

Some key features of the editor toolbar are covered here. For more information, you may wish to check out the FCKeditor user’s guide; this is the editor MDC uses.

The underlying content for all articles is XHTML.  You may view and edit the XHTML source for any article by clicking the “Source” button in the toolbar.

The Style dropdown menu lists a number of commonly used styles you can apply to text:

  • “Code (inline)” is used for short code snippets, function names, class names, interface names, and so forth.
  • “Variable” is used for variable and field names.
  • “Note” is used for paragraphs that include important information to be specially called out. You should start a note paragraph with "Note:" in bold.
  • “Warning” is used for critical messages; typically these should start with “Warning:” in bold.
  • “Disable wiki processing” lets you flag a region of content, indicating it should not be processed by the wiki. For example, this will prevent URLs in the middle of code samples from being turned into clickable links.

See also

{{ languages( {"ja": "Project:ja/MDC editor guide"} ) }}

Revision Source

<p>The WYSIWYG (what-you-see-is-what-you-get) editor offered by MDC makes it easy to contribute new content to the Mozilla Developer Center.  This article provides some information on how to use the editor, as well as some information about helpful features that may improve your productivity.</p>
<h2>Keyboard shortcuts</h2>
<p>There are a number of convenient keyboard shortcuts available to help you avoid taking your hands off the keyboard while you work. </p>
<p>The shortcuts are listed for Windows and Linux.  On Macs, instead of using the Control key, use the Command key (⌘).</p>
<table class="standard-table" style="max-width:45em" summary="Keyboard shortcuts in the MDC editor."> <tbody> <tr> <th>Shortcut</th> <th>Description</th> </tr> <tr> <td><code>Ctrl-A</code></td> <td>Select all</td> </tr> <tr> <td>Ctrl-C</td> <td>Copy to clipboard</td> </tr> <tr> <td>Ctrl-V</td> <td>Paste from clipboard</td> </tr> <tr> <td>Ctrl-X</td> <td>Cut</td> </tr> <tr> <td>Ctrl-Z</td> <td>Undo</td> </tr> <tr> <td>Ctrl-Y</td> <td>Redo</td> </tr> <tr> <td>Ctrl-K</td> <td>Open link editor</td> </tr> <tr> <td>Ctrl-W</td> <td>Turn the selected text into a link without using the link editor. Note that this sets the link to be the same as the text, which may not be what you really want (since usually you need to prepend the language code to the article's name).</td> </tr> <tr> <td>Ctrl-B</td> <td>Bold</td> </tr> <tr> <td>Ctrl-I</td> <td>Italic</td> </tr> <tr> <td>Ctrl-U</td> <td>Underline</td> </tr> <tr> <td>Ctrl-Shift-S</td> <td>Save changes</td> </tr> <tr> <td>Ctrl-Alt-Enter</td> <td>Fit window</td> </tr> <tr> <td>Ctrl-L</td> <td>Justify left</td> </tr> <tr> <td>Ctrl-R</td> <td>Justify right</td> </tr> <tr> <td>Ctrl-E</td> <td>Justify center</td> </tr> <tr> <td>Ctrl-J</td> <td>Justify fully</td> </tr> <tr> <td>Ctrl-1 through Ctrl-5</td> <td>Select header level 1–5</td> </tr> <tr> <td>Ctrl-0, Ctrl-N</td> <td>Paragraph format</td> </tr> <tr> <td>Ctrl-Shift-L</td> <td>Toggles bulleted list / numbered list / paragraph format</td> </tr> <tr> <td>Tab</td> <td>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.</td> </tr> <tr> <td>Shift-Tab</td> <td>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.</td> </tr> <tr> <td>Shift-Space</td> <td>Inserts a non-breaking space (<code>&amp;nbsp;</code>)</td> </tr> <tr> <td>Shift-Enter</td> <td>Exits out of the current block.  For example, if you’re currently editing a<code> &lt;pre&gt; </code>block, Shift-Enter exits the block, putting you back in the body of the article.</td> </tr> </tbody>
</table>
<h2>Including a revision note</h2>
<p>When saving your change, it’s helpful if you include a note explaining why you made the change. Enter some text in the “Edit summary” box below the editor before saving your change.</p>
<p>There are a few reasons this is helpful:</p>
<ul> <li>If the reason for your change isn’t obvious, your note can explain the reasoning to others.</li> <li>If your change is technically complex, it can explain to editors the logic behind it.  This can include a bug number, for example, that editors can refer to for more information.</li> <li>If your edit involves deleting a large amount of content, you can justify the deletion (for example, “I moved this content to article X”).</li>
</ul>
<h2>Linking</h2>
<p>There are some templates that make it easy to create in-page links. For example, you can link to a section with a given name using the <a href="/Template:anch" title="Template:anch">anch</a> template, like this:</p>
<p><span class="nowiki">{{anch("Including a revision note")}}</span></p>
<p>This inserts an anchor like this: {{ anch("Including a revision note") }}.</p>
<p>When writing interface documentation, and you need to link to a method within the current article, you can use the <a href="/Template:manch" title="Template:manch">manch</a> template, like this:</p>
<p><span class="nowiki">{{manch("methodName")}}</span></p>
<p>This looks like this: {{ manch("methodName") }}.</p>
<h2>Deleting a page</h2>
<p>If you come upon a page that needs to be deleted for any reason, simply add the tag “junk” to it. A helpful MDC administrator will remove the page shortly thereafter.</p>
<p>What are good reasons to mark a page for deletion?</p>
<ul> <li>The page was created by accident and has no content</li> <li>The page’s contents were merged with another article</li> <li>The page is spam</li> <li>The page’s contents are so woefully obsolete as to be dangerous</li>
</ul>
<h2>Useful DekiScript commands</h2>
<p>Sometimes, it’s useful to take advantage of special DekiScript commands to improve the look and feel of your content.</p>
<h3>Ensuring that full links are displayed inline</h3>
<p>By default, the MindTouch wiki truncates lengthy URLs when displaying them in the bodies of articles. This is not typically what we want. If you find this is happening to you, you can use the <code>web.link</code> command to embed the full URL, like this:</p>
<dl> <dt>Truncated</dt> <dd><a class=" external" href="http://www.bitstampede.com/2009/06/04/more-new-features-on-mdc/" rel="freelink">http://www.bitstampede.com/2009/06/0...atures-on-mdc/</a></dd> <dt>Inlined</dt> <dd>{{ web.link("http://www.bitstampede.com/2009/06/04/more-new-features-on-mdc/") }}</dd>
</dl>
<p>This is done by using the text <code><span class="nowiki">{{web.link("http://www.bitstampede.com/2009/06/04/more-new-features-on-mdc/")}}</span></code>.</p>
<h2>Using syntax highlighting</h2>
<p>MDC supports syntax highlighting for code samples.  To use it, the first step is to insert the code sample into the document:</p>
<p>void main(int argc, char **argv) {</p>
<p style="margin-left: 40px;">printf("Hello world\n");</p>
<p>}</p>
<p>The second step is to select the text and change the Format in the toolbar to “Formatted”.</p>
<pre>void main(int argc, char **argv) {
  printf("Hello world\n");
}
</pre>
<p>The third step is to use the <strong>Transformation</strong> menu to select the language corresponding to the syntax highlighting you wish to apply.  In this case, we'll use the C++ syntax highlighter.</p>
<pre class="brush: cpp">void main(int argc, char **argv) {
  printf("Hello world\n");
}</pre>
<div class="note"><strong>Note:</strong> The editor does not display the syntax highlighting.  You'll need to save your changes and look at the article to see the syntax highlighting in effect.</div>
<div class="noinclude">
<h2>Accessing your browser’s standard contextual menu</h2>
<p>By default, the editor uses its own contextual menu when you right-click on the editor. To access your browser’s default contextual menu (such as to access the Firefox spell checker’s list of suggested corrections), hold down the Control key while clicking.</p>
<h2>The toolbar</h2>
<div class="note"><strong>Note:</strong> The editor toolbar is currently undergoing a redesign, and may change over the next few days.</div>
<p>Some key features of the editor toolbar are covered here. For more information, you may wish to check out the <a class="external" href="http://docs.fckeditor.net/FCKeditor_2.x/Users_Guide" title="http://docs.fckeditor.net/FCKeditor_2.x/Users_Guide">FCKeditor user’s guide</a>; this is the editor MDC uses.</p>
<p>The underlying content for all articles is XHTML.  You may view and edit the XHTML source for any article by clicking the “Source” button in the toolbar.</p>
<p>The Style dropdown menu lists a number of commonly used styles you can apply to text:</p>
<ul> <li>“Code (inline)” is used for short code snippets, function names, class names, interface names, and so forth.</li> <li>“Variable” is used for variable and field names.</li> <li>“Note” is used for paragraphs that include important information to be specially called out. You should start a note paragraph with "<strong>Note:</strong>" in bold.</li> <li>“Warning” is used for critical messages; typically these should start with “<strong>Warning:</strong>” in bold.</li> <li>“Disable wiki processing” lets you flag a region of content, indicating it should not be processed by the wiki. For example, this will prevent URLs in the middle of code samples from being turned into clickable links.</li>
</ul>
<h2>See also</h2>
<ul> <li><a class="internal" href="/Project:en/Using_the_Mozilla_Developer_Center" title="Project:en/Using the Mozilla Developer Center">Using the Mozilla Developer Center</a></li> <li><a href="/Project:en/Custom_Templates" title="Project:en/Custom Templates">Custom Templates</a></li> <li><a class="external" href="http://docs.fckeditor.net/FCKeditor_2.x/Users_Guide" title="http://docs.fckeditor.net/FCKeditor_2.x/Users_Guide">FCKeditor Users Guide</a></li>
</ul>
</div>
<div class="noinclude">{{ languages( {"ja": "Project:ja/MDC editor guide"} ) }}</div>
Revert to this revision