El editor WYSIWYG incorporado en MDN esta diseñado para que sea lo mas facil posible crear, editar, y mejorar articulos y otras páginas en casi cualquier sitio. La ventana del editor, se muestra a continuación, esta compuesta de ocho cajas de llaves. Esta página proporcionara información sobre cada sección para que sepa como usar nuestro entorno de edición.

Nota: Nosotros estamos constantemente trabajando en mejoras para MDN, por lo que habrá ocasiones en que esta documentación podrá estar un poco dectualizada. Sin embargo, periodicamente actualizaremos esta documentación para evitar que quede rezagada.

Controles de página

El área de controles de página ofrece botones que afectan a la página como un todo:

Guardar y seguir editando
Guardar la página sin cerrar el editor; esto le permite guardar su trabajo periodicamente, creando una entrada en el historial de la página a la que puede volver si lo necesita, o en caso de que necesite dejar de trabajar y volver a consultarlo más tarde. Esta opción no está disponible cuando se crean páginas nuevas. Consulte La caja de comentarios de revisión para obtener información sobre cómo incluir un comentario de revisión en su articulo guardado.
Guardar cambios
Guarda la página y cierra el editor, regresando a la página en navegación estandar. Consulte La caja de revisión de comentarios para obtener información sobre cómo incluir un comentario de revisión en su articulo guardado.
Cambios de revisión
Abre una nueva pestaña o ventana que muestra la página tal como existe en su editor privado, pero representada como si estuviera navegando hacia ella como si fuera pública. Esto incluye la ejecución de cualquier macros y plantillas que use en el contenido. Tenga en cuenta que su trabajo aún no guarda cuando usa esta opción, pero esto le permite verificar antes de que los cambios se hagan públicos, que no ha cometido ningún error en sus macros, plantillas o formateo que pueden impedir que la página se reproduzca correctamente. Tenga en cuenta también que si la página contiene macros o plantillas mal formadas, el procesador de la página de modo de vista previa puede generar una advertencia como: "Hubo un error de scripting en está página. Mientras los editores del sitio lo están abordando, puede ver el contenido parcial a continuación. "Tenga la seguridad de que, siempre que no haya modificado ni agregado macros o plantillas en la página, este error se puede ignorar de forma segura y desaparecer cuando la página editada finalmente se guarde y vuelva a verse normalmente (a menos que ya estuviera alli en la ver). Sin embargo, si aún no está seguro de si USTED presentó el error, simplemente abra una COPIA de la página normal en una nueva ventana, ingrese Modo de edición e inmediatamente Vista previa. Si ocurre algún error ahora, puede estar seguro de que no los causó, y que probablemente desaparecerán como se describió anteriormente. En cuanto a los cambios, si estos nuevos errores son los mismos que los antiguos de la ventana anterior, simplemente cierre la nueva ventana y continúe trabajando en la anterior. Sin enbargo, si se trata de errores diferentes, es posible que haya dañado algo en la ventana anterior, así que empiece copiando cuidadosamente los cambios en la nueva ventana y obtenga una vista previa después de cada copia. Si los viejos errores aparecen de repente también aquí, es probable que sus últimos cambios lo hayan causado,  y debe examinar cuidadosamente ese trabajo. Finalmente, como ventaja adicional, si obtiene una vista previa con frecuencia y siempre deja abierta esa ventana de vista previa, tendrá una copia rápida pero no guardada de la mayoria de sus cambios de texto si el editor falla o revierte de algún modo los buenos cambios (como puede ocurrir al intentarlo) para usar Des hacer).

Advertencia: Actualmente algunos macros y plantillas NO se ejecutan correctamente en el modo vista previa, dejanda la página vista previa sin partes estándar como barras laterales de contenido, y por lo tanto con un diseño de página algo distorcionado; es decir, no totalmente WYSIWYG.  Además, si SCAYT (Corrector ortográfico mientras escribe) está habilitado (y posiblemente si la página contiene ciertas macros o plantillas WORKING), el modo vista previa aún puede dar un error de guión.


Descartar los cambios
Cancele su edición, eliminando cualquier cambio que haya realizado sin guardar. Volvera a la página en modo de navegación estandar.

Advertencia: Ocasionalmente, Undo puede funcionar incorrectamente y comenzar a actuar más como un descarte parcial: Cambios, deshacer  muchos cambios, pero no salir del editor. De ser así, guarde, salga, y vuelva a entrar al editor.


El cuadro de información de la página

El cuadro de información de la página contiene información sobre la página, pero también se puede ampliar para ofrecer controles de página adicionales. De forma predeterminada, muestra el titulo de la página y la fecha y la hora en que se guardo un borrador local, el borrador local almacenado en su computadora, es usado como una copia de seguridad  in caso de que accidentalmente navegue fuera del editor o su navegador se cuelgue (crashes).

Puede hacer click en el enlace "Editar titulo y propiedades de la página" para cambiar a una vista que ofrece controles de página adicionales. Esta vista se ve así:

Esta vista le permitecambiar el titulo de visualización de la página y la profundidad de la tabla de contenido que se muestra en la barra de titulo del navegador (o barra de pestañas) y como el titulo de la página en la parte superior del artículo y en la barra de navegación, según corresponda. No afecta la URL de la página.

Nota: Vale la pena señalar que preferimos URL cortas y títulos descriptivos; por ejemplo, el artículo sobre la API de Kuma tiene el título "The Kuma API" pero su URL slug (la parte anterior a la raíz del sitio) es proyecto:MDN/Kuma/API, donde "API" representa esta página.

El nivel TOC (tabla de contenido) le permite especificar que tan profundamente deben ir los niveles de encabazado del artículo a la tabla de contenido que se muestra automáticamente en la página. De forma predeterminada, los niveles de encabezado <h2> hasta <h4> están incluidos en el TOC, de modo que el TOC tiene una profundidad de tres niveles. Sin embargo, puede establecer esto en cualquiera de ellos, así como "Sin TOC" (para mostrar un TOC en absoluto, como en las páginas de inicio) o para mostrar todos los niveles en el TOC.

Al igual que con todos los cambios que pueda realizar, los cambios en el cuadro de información de la página no tendrán efecto a menos que guarde la página.

The toolbar

The editor's toolbar offers features that let you adjust the appearance and flow of the article as you work. There are two rows of buttons (more if the width of your window is narrow enough that they wrap, but generally two) and a third row that shows the hierarchy of HTML elements leading up to where you are. In the screenshot below, for example, you're writing inside a top-level <p> block.

The toolbar's buttons are divided into seven groups. Let's look at each; we will examine the buttons in each group in order left-to-right.

Document options

The document options box provides options for document-level manipulations:

Source mode toggle
The source mode toggle button lets you toggle between editing using the WYSIWYG interface and 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.
Save and keep editing
A duplicate for the main "Save and keep editing" button.
Save and exit
Just like the main "Save changes" button.
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.

Note: 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) that 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).

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.
Enable SCAYT
Activates SCAYT (Spell-Check As You Type); or if already activated, presents a submenu that lets you control and configure (or deactivate) the checker.
Find
Opens the Find panel in "Find" mode, which lets you search your document for a specified string.
Replace
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.

Block-level options

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.
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.
Image
Inserts a new image into the article. See Adding images to an article below for details on how to use this option.
Table
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.

Maximizar

Esta es una caja extraña, ya que conciste en un solo botón: Maximizar. Este boton hace que la interfaz del editor (es decir, la barra de herramientas y el cuadro de edición) se encargue de toda la ventana de su navegador, proporcionándole la mayor cantidad de espacio posible para escribir.

Encabezados

Los botones de encabezado le permiten insertar un encabezado. Haga clic en uno de estos botones para crear un nuevo encabezado en la profundidad correspondiente. Por defecto,  H2 hasta H4 se incluyen en la tabla de contenido, pero puedes cambiar esto, como se describe en El cuadro de información de la página.

Formateo de estilos

El siguiente cuadro es un menú desplegable de opciones de formato especiales. Estos son:

Ninguna
Elimina todo el estilo del bloque actual.
Caja de notas
Crea un cuadro de nota, como se va a continuación. Siempre debe iniciar un cuadro de nota con "nota:" en negrita.

Nota: Este es un cuadro de nota

Caja de advertencia
Crea un cuadro de advertencia, como se ve a continuación. Estos siempre deben comenzar con  "Advertencía:" en letras negritas.

Atención: Este es un cuadro de atención.

Two columns
Has la 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.
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.

PRE
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
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.
Create a redirect
Inserts a redirect. See Creating redirects for further information.

The final group of toolbar buttons includes options for creating and maintaining links and anchors, as well as for applying inline styles to content.

Link
Creates a new link. This button opens the link editor dialog, which is covered under Creating and editing links below.
Unlink
Removes the link at the insertion point.
Anchor
Creates an anchor at the insertion point.
Bold
Toggles boldface text mode.
Italic
Toggles italic text mode.
Underline
Toggles underlined text mode.
Code
Toggles <code> mode. This is used for inline presentation of variable names, function names, object names, filenames, and so forth.
Strike through
Toggles strikethrough mode.
Superscript
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.
Center
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 editor box offers appropriate additional options depending on the context of your click; clicking in a table offers table-related options and clicking in a list will offer list-related options, for example.

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 Shift or Control key (the Command key on Mac OS X) while clicking.

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.

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").

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:

The tag editing box showing three tags.

Adding a tag

To add a new tag, simply click in the box and start typing:

Screen thot: the tag box after typing a new tag but before pressing Enter.

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:

Screen shot: the tag box with our new tag in place.

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.

The most common use case for attachments is to add images to pages. When uploading an image, please be sure to use an image optimization tool to make the file as small to download as possible. This improves page load time and helps MDN's performance overall. You may use your preferred tool, if you have one. Otherwise, we suggest TinyPNG, a handy Web tool.

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.

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 Mac, instead of using the Control key, you can 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  -- (Notice)
Ctrl + Y Redo
Ctrl + K Open link editor/add a new link
Ctrl + Shift + K Removes the link at the current cursor position.
Ctrl + B Bold
Ctrl + I Italic
Ctrl + O Toggle <code> style.
Ctrl + Shift + O Toggle source view mode.
Ctrl + P Toggles the <pre> style on the current block.
Ctrl + U Underline.
Ctrl + S Save changes and close the editor.
Ctrl + Shift + S Save changes without closing the editor.
Ctrl + 0 Remove formatting from the selected area (That's a zero, not the letter "O").
Ctrl + 2 through Ctrl + 6 Select heading level 2 through-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 heading, 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 heading, the cursor jumps to the next paragraph.
Shift + Space Inserts a non-breaking space (&nbsp;)
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.

Note: Not currently implemented; see error 780055.

See also

Etiquetas y colaboradores del documento

Colaboradores en esta página: wbamberg, mLeC, jsx, DUBMON78
Última actualización por: wbamberg,