mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
c789e88df2
* docs(locadex): add translations * Apply suggestion from @ethanpalm * Apply suggestion from @ethanpalm --------- Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
374 lines
17 KiB
Plaintext
374 lines
17 KiB
Plaintext
---
|
|
title: "Editor visual"
|
|
description: "Crea, mantén y publica documentación en tu navegador."
|
|
keywords: ["visual editor", "WYSIWYG", "web editor"]
|
|
---
|
|
|
|
<img className="block dark:hidden my-0 pointer-events-none" src="/images/editor/editor-light.png" alt="Interfaz del editor visual de Mintlify en modo claro" />
|
|
|
|
<img className="hidden dark:block my-0 pointer-events-none" src="/images/editor/editor-dark.png" alt="Interfaz del editor visual de Mintlify en modo oscuro" />
|
|
|
|
Accede al editor visual desde tu [dashboard](https://dashboard.mintlify.com/editor) para gestionar tu documentación directamente en el navegador.
|
|
|
|
* **Edición WYSIWYG**: Realiza cambios en tu documentación con un editor WYSIWYG (lo que ves es lo que obtienes) que muestra cómo se verá tu contenido al publicarse.
|
|
* **Sincronización con Git**: Todos los cambios se sincronizan automáticamente con tu repositorio de Git para mantener el control de versiones.
|
|
* **Colaboración en equipo**: Varias personas pueden trabajar en la documentación simultáneamente.
|
|
* **Integración de componentes**: Agrega avisos, bloques de código y otros componentes con comandos de barra diagonal.
|
|
* **Sin necesidad de configuración**: Comienza a escribir de inmediato desde tu dashboard.
|
|
|
|
<div id="overview">
|
|
## Descripción general
|
|
</div>
|
|
|
|
Así es como normalmente trabajarás en el editor visual:
|
|
|
|
<Steps>
|
|
<Step title="Choose your branch">
|
|
Crea una branch o realiza cambios directamente en tu rama de implementación. Recomendamos crear una branch para que puedas previsualizar tus cambios antes de que se publiquen.
|
|
</Step>
|
|
|
|
<Step title="Open your file">
|
|
Ve a un archivo existente en la barra lateral o crea uno nuevo usando el explorador de archivos.
|
|
</Step>
|
|
|
|
<Step title="Edit your content">
|
|
Realiza cambios en el editor visual. Presiona <kbd>/</kbd>
|
|
para abrir el menú de componentes.
|
|
</Step>
|
|
|
|
<Step title="Preview your changes">
|
|
El modo visual te muestra cómo se verán tus cambios en tu sitio en producción. Úsalo para verificar que todo esté correcto.
|
|
</Step>
|
|
|
|
<Step title="Publish your changes">
|
|
Si estás trabajando en tu rama de implementación, publica tus cambios directamente desde el editor visual. En otras branches, crea una solicitud de extracción para revisión antes de publicar.
|
|
</Step>
|
|
</Steps>
|
|
|
|
<div id="editor-modes">
|
|
## Modos del editor
|
|
</div>
|
|
|
|
El editor visual tiene dos modos para adaptarse a distintas preferencias y necesidades de edición: modo visual y Markdown mode.
|
|
|
|
Usa el conmutador de modo en la barra de herramientas del editor para cambiar de modo.
|
|
|
|
<Frame>
|
|
<img src="/images/editor/mode-toggle-light.png" alt="Iconos del conmutador de modo resaltados en el editor visual." className="block dark:hidden" />
|
|
|
|
<img src="/images/editor/mode-toggle-dark.png" alt="Iconos del conmutador de modo resaltados en el editor visual." className="hidden dark:block" />
|
|
</Frame>
|
|
|
|
<div id="visual-mode">
|
|
### Modo visual
|
|
</div>
|
|
|
|
El modo visual ofrece una experiencia WYSIWYG (what you see is what you get) en la que los cambios que realizas en el editor reflejan cómo se verá tu documentación publicada. Este modo es ideal cuando quieres ver en tiempo real cómo se verán tus cambios.
|
|
|
|
<Frame>
|
|
<img src="/images/editor/visual-mode-light.png" alt="Modo de edición visual en el editor visual de Mintlify" className="block dark:hidden" />
|
|
|
|
<img src="/images/editor/visual-mode-dark.png" alt="Modo de edición visual en el editor visual de Mintlify" className="hidden dark:block" />
|
|
</Frame>
|
|
|
|
<div id="markdown-mode">
|
|
### Markdown mode
|
|
</div>
|
|
|
|
Markdown mode ofrece acceso directo a los archivos que conforman tu documentación. Este modo es ideal cuando necesitas tener un control preciso sobre las propiedades de los componentes o cuando prefieres escribir con la sintaxis de MDX.
|
|
|
|
<Frame>
|
|
<img src="/images/editor/markdown-mode-light.png" alt="Markdown mode en el editor visual de Mintlify" className="block dark:hidden" />
|
|
|
|
<img src="/images/editor/markdown-mode-dark.png" alt="Markdown mode en el editor visual de Mintlify" className="hidden dark:block" />
|
|
</Frame>
|
|
|
|
<div id="manage-content">
|
|
## Gestionar contenido
|
|
</div>
|
|
|
|
<div id="navigate-your-files">
|
|
### Navega por tus archivos
|
|
</div>
|
|
|
|
Usa el explorador de archivos de la barra lateral para explorar tus archivos de documentación. Haz clic en cualquier archivo para abrirlo en el editor.
|
|
|
|
Pulsa <kbd>Command</kbd> + <kbd>P</kbd> en macOS o <kbd>Ctrl</kbd> + <kbd>P</kbd> en Windows para buscar archivos por nombre.
|
|
|
|
<div id="create-new-pages">
|
|
### Crear páginas nuevas
|
|
</div>
|
|
|
|
Selecciona el icono **Crear un archivo nuevo** en la barra lateral del explorador de archivos.
|
|
|
|
<Frame>
|
|
<img src="/images/editor/files-menu-light.png" className="block dark:hidden rounded-2xl border border-gray-100 shadow-lg" style={{ width:"400px",height:"auto" }} alt="Menú de archivos en el editor visual" />
|
|
|
|
<img src="/images/editor/files-menu-dark.png" className="hidden dark:block rounded-2xl border border-white/10 shadow-lg" style={{ width:"400px",height:"auto" }} alt="Menú de archivos en el editor visual en modo oscuro" />
|
|
</Frame>
|
|
|
|
Los nombres de archivo se completan automáticamente con la extensión `.mdx`. Para cambiar el tipo de archivo, haz clic en la extensión. Selecciona el tipo de archivo que deseas en el menú desplegable.
|
|
|
|
<Frame>
|
|
<img src="/images/editor/file-type-light.png" className="block dark:hidden" style={{ width:"auto",height:"400px" }} alt="Menú de extensión de archivo en el editor visual." />
|
|
|
|
<img src="/images/editor/file-type-dark.png" className="hidden dark:block" style={{ width:"auto",height:"400px" }} alt="Menú de extensión de archivo en el editor visual en modo oscuro." />
|
|
</Frame>
|
|
|
|
<div id="rename-pages">
|
|
### Renombrar páginas
|
|
</div>
|
|
|
|
Para cambiar el nombre de una página, haz clic en el icono de menú de tres puntos del archivo que quieres renombrar. Selecciona **Renombrar** en el menú desplegable.
|
|
|
|
<Frame>
|
|
<img src="/images/editor/rename-light.png" className="block dark:hidden" alt="Cambiar el nombre de una página en el editor visual." />
|
|
|
|
<img src="/images/editor/rename-dark.png" className="hidden dark:block" alt="Cambiar el nombre de una página en el editor visual en modo oscuro." />
|
|
</Frame>
|
|
|
|
<div id="delete-pages">
|
|
### Eliminar páginas
|
|
</div>
|
|
|
|
Para eliminar una página, haz clic en el icono del menú de tres puntos del archivo que quieras eliminar. Selecciona **Eliminar** en el menú desplegable.
|
|
|
|
<Frame>
|
|
<img src="/images/editor/delete-page-light.png" className="block dark:hidden" alt="Eliminar una página en el editor visual." />
|
|
|
|
<img src="/images/editor/delete-page-dark.png" className="hidden dark:block" alt="Eliminar una página en el editor visual en modo oscuro." />
|
|
</Frame>
|
|
|
|
<div id="organize-your-navigation">
|
|
### Organiza tu navigation
|
|
</div>
|
|
|
|
Edita tu archivo `docs.json` para agregar nuevas páginas y eliminar las páginas borradas de la navigation de tu sitio. Consulta [Navigation](/es/organize/navigation) para obtener más información sobre cómo organizar las páginas.
|
|
|
|
**Ejemplo: Agregar una página de Temas al grupo Profile**
|
|
|
|
En este ejemplo, creaste una nueva página titulada Temas y quieres agregarla al grupo Profile en tu documentación. Agrega la ruta de la nueva página al array `pages` del grupo `Profile` en tu archivo `docs.json` para que aparezca en la navigation de tu sitio.
|
|
|
|
```json Adding a Themes page to the Profile group {18}
|
|
{
|
|
"navigation": {
|
|
"groups": [
|
|
{
|
|
"group": "Primeros pasos",
|
|
"pages": [
|
|
"index",
|
|
"quickstart",
|
|
"installation"
|
|
]
|
|
},
|
|
{
|
|
"group": "Perfil",
|
|
"pages": [
|
|
"settings",
|
|
"account-types",
|
|
"dashboard",
|
|
"themes"
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
<div id="edit-content">
|
|
### Editar contenido
|
|
</div>
|
|
|
|
Realiza cambios en tus páginas usando el modo visual o Markdown mode en el editor.
|
|
|
|
En el modo visual, presiona <kbd>/</kbd> para abrir el menú de componentes. Agrega bloques de contenido, notas, bloques de código y otros componentes para personalizar tu documentación.
|
|
|
|
<Frame>
|
|
<img src="/images/editor/component-menu-light.png" alt="El menú de componentes desplegado resaltado en el editor visual de Mintlify" className="block dark:hidden" />
|
|
|
|
<img src="/images/editor/component-menu-dark.png" alt="El menú de componentes desplegado resaltado en el editor visual de Mintlify" className="hidden dark:block" />
|
|
</Frame>
|
|
|
|
En Markdown mode, puedes editar directamente el MDX de tus páginas. Esto puede ser útil cuando necesitas:
|
|
|
|
* Definir propiedades específicas de los componentes
|
|
* Trabajar con componentes anidados complejos
|
|
* Copiar y pegar contenido MDX desde otras fuentes
|
|
|
|
Consulta [Formatear texto](/es/create/text) y [Formatear código](/es/create/code) para obtener más información sobre cómo escribir usando la sintaxis de MDX.
|
|
|
|
<div id="publish-your-changes">
|
|
## Publica tus cambios
|
|
</div>
|
|
|
|
La rama en la que trabajes determina cómo el editor publica tus cambios:
|
|
|
|
* **Rama de implementación**: Al publicar, tu sitio en producción se actualiza de inmediato.
|
|
* **Otras ramas**: Al publicar, se crea una solicitud de extracción para que puedas revisar los cambios antes de implementarlos en producción.
|
|
|
|
<Frame>
|
|
<img src="/images/editor/publish-flow-light.png" alt="El botón Publicar resaltado en el editor visual de Mintlify" className="block dark:hidden" />
|
|
|
|
<img src="/images/editor/publish-flow-dark.png" alt="El botón Publicar resaltado en el editor visual de Mintlify" className="hidden dark:block" />
|
|
</Frame>
|
|
|
|
Si autorizas a Mintlify con tu usuario de GitHub, tus confirmaciones se firmarán como si las hubieras hecho tú mismo. Si no, las firmará la Aplicación de GitHub de Mintlify.
|
|
|
|
<div id="pull-requests-and-reviewing-changes">
|
|
### Solicitudes de extracción y revisión de cambios
|
|
</div>
|
|
|
|
Las solicitudes de extracción te permiten proponer cambios desde tu branch para que otras personas los revisen antes de fusionarlos en tu documentación en producción. Esto ayuda a garantizar que tus cambios sean correctos y le da a tu equipo la oportunidad de colaborar en el contenido.
|
|
|
|
<Tip>
|
|
Incluso si trabajas solo, las solicitudes de extracción son útiles para previsualizar cambios y mantener un historial claro de actualizaciones.
|
|
</Tip>
|
|
|
|
<div id="create-a-pull-request">
|
|
#### Crea una solicitud de extracción
|
|
</div>
|
|
|
|
<Steps>
|
|
<Step title="Guarda tu trabajo">
|
|
Selecciona **Guardar cambios** para guardar todos los cambios en tu branch.
|
|
</Step>
|
|
|
|
<Step title="Crea la solicitud de extracción">
|
|
Selecciona **Publicar solicitud de extracción** en la barra de herramientas del editor.
|
|
</Step>
|
|
|
|
<Step title="Agrega un título y una descripción">
|
|
Escribe un título y una descripción claros que expliquen:
|
|
|
|
* Qué cambios realizaste
|
|
* Por qué los hiciste
|
|
* Qué áreas específicas necesitan revisión
|
|
</Step>
|
|
|
|
<Step title="Crea y comparte">
|
|
Selecciona **Publicar solicitud de extracción**. El editor te proporcionará un enlace para ver tu solicitud de extracción.
|
|
|
|
<Frame>
|
|
<img src="/images/editor/pull-request-light.png" alt="Botón «Publicar solicitud de extracción» destacado en el editor visual de Mintlify" className="block dark:hidden" />
|
|
|
|
<img src="/images/editor/pull-request-dark.png" alt="Botón «Publicar solicitud de extracción» destacado en el editor visual de Mintlify" className="hidden dark:block" />
|
|
</Frame>
|
|
</Step>
|
|
</Steps>
|
|
|
|
<div id="review-pull-requests">
|
|
#### Revisar solicitudes de extracción
|
|
</div>
|
|
|
|
Una vez creada tu solicitud de extracción:
|
|
|
|
1. **Revisar cambios**: Tú y tu equipo pueden revisar la solicitud de extracción en tu proveedor de Git, como GitHub o GitLab.
|
|
2. **Dejar comentarios**: Añade comentarios o solicita cambios.
|
|
3. **Realizar cambios adicionales**: Haz cambios adicionales en el editor visual. Cuando seleccionas Guardar cambios, el editor los envía a tu solicitud de extracción.
|
|
4. **Aprobar**: Aprueba la solicitud de extracción cuando estés satisfecho con los cambios.
|
|
5. **Fusionar**: Fusiona la solicitud de extracción cuando estés listo para implementar tus cambios en producción.
|
|
|
|
<div id="keyboard-shortcuts">
|
|
## Atajos de teclado
|
|
</div>
|
|
|
|
El editor visual admite todos los atajos de teclado comunes —como copiar, pegar, deshacer y seleccionar todo— y además los siguientes:
|
|
|
|
| Comando | macOS | Windows |
|
|
| :------------------------------- | :--------------------------------------------------- | :------------------------------------------------------- |
|
|
| **Buscar archivos** | <kbd>Cmd</kbd> + <kbd>P</kbd> | <kbd>Control</kbd> + <kbd>P</kbd> |
|
|
| **Agregar enlace al texto seleccionado** | <kbd>Cmd</kbd> + <kbd>K</kbd> | <kbd>Control</kbd> + <kbd>K</kbd> |
|
|
| **Insertar salto de línea** | <kbd>Cmd</kbd> + <kbd>Enter</kbd> | <kbd>Control</kbd> + <kbd>Enter</kbd> |
|
|
| **Negrita** | <kbd>Cmd</kbd> + <kbd>B</kbd> | <kbd>Control</kbd> + <kbd>B</kbd> |
|
|
| **Cursiva** | <kbd>Cmd</kbd> + <kbd>I</kbd> | <kbd>Control</kbd> + <kbd>I</kbd> |
|
|
| **Subrayado** | <kbd>Cmd</kbd> + <kbd>U</kbd> | <kbd>Control</kbd> + <kbd>U</kbd> |
|
|
| **Tachado** | <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> | <kbd>Control</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> |
|
|
| **Código** | <kbd>Cmd</kbd> + <kbd>E</kbd> | <kbd>Control</kbd> + <kbd>E</kbd> |
|
|
| **Texto normal** | <kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>0</kbd> | <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd>0</kbd> |
|
|
| **Encabezado 1** | <kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>1</kbd> | <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd>1</kbd> |
|
|
| **Encabezado 2** | <kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>2</kbd> | <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd>2</kbd> |
|
|
| **Encabezado 3** | <kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>3</kbd> | <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd>3</kbd> |
|
|
| **Encabezado 4** | <kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>4</kbd> | <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd>4</kbd> |
|
|
| **Lista numerada** | <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>7</kbd> | <kbd>Control</kbd> + <kbd>Shift</kbd> + <kbd>7</kbd> |
|
|
| **Lista con viñetas** | <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>8</kbd> | <kbd>Control</kbd> + <kbd>Shift</kbd> + <kbd>8</kbd> |
|
|
| **Cita en bloque** | <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd> | <kbd>Control</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd> |
|
|
| **Subíndice** | <kbd>Cmd</kbd> + <kbd>,</kbd> | <kbd>Control</kbd> + <kbd>,</kbd> |
|
|
| **Superíndice** | <kbd>Cmd</kbd> + <kbd>.</kbd> | <kbd>Control</kbd> + <kbd>.</kbd> |
|
|
|
|
<div id="troubleshooting">
|
|
## Solución de problemas
|
|
</div>
|
|
|
|
Encuentra soluciones a problemas comunes que puedes encontrar al usar el editor visual.
|
|
|
|
<AccordionGroup>
|
|
<Accordion title="Los cambios no aparecen después de publicar">
|
|
**Posibles causas:**
|
|
|
|
* La implementación aún está en progreso
|
|
* Problemas de caché del navegador
|
|
* Errores de compilación o de implementación
|
|
|
|
**Soluciones:**
|
|
|
|
1. Revisa el estado de la implementación en tu dashboard.
|
|
2. Actualiza forzosamente tu navegador (<kbd>Ctrl</kbd>
|
|
|
|
* <kbd>F5</kbd>
|
|
|
|
o <kbd>Cmd</kbd>
|
|
|
|
* <kbd>Shift</kbd>
|
|
|
|
* <kbd>R</kbd>
|
|
|
|
)
|
|
3. Borra la caché de tu navegador.
|
|
</Accordion>
|
|
|
|
<Accordion title="Errores de permisos al publicar">
|
|
**Posibles causas:**
|
|
|
|
* Permisos insuficientes en el repositorio de Git
|
|
* Problemas de autenticación con tu proveedor de Git
|
|
|
|
**Soluciones:**
|
|
|
|
1. Verifica que tengas el acceso correcto al repositorio.
|
|
2. Comprueba si tu integración de Git está configurada correctamente.
|
|
3. Revisa la documentación de [Permisos del editor](/es/dashboard/permissions).
|
|
</Accordion>
|
|
|
|
<Accordion title="Problemas al cargar el editor">
|
|
**Posibles causas:**
|
|
|
|
* Problemas de conectividad de red
|
|
* Repositorios de documentación grandes
|
|
|
|
**Soluciones:**
|
|
|
|
1. Verifica tu conexión a internet.
|
|
2. Recarga la página.
|
|
3. Contacta al soporte si el problema persiste.
|
|
</Accordion>
|
|
|
|
<Accordion title="Los archivos no cargan o muestran errores">
|
|
**Posibles causas:**
|
|
|
|
* Sintaxis de MDX no válida en los archivos
|
|
* Archivos faltantes o dañados
|
|
* Archivos demasiado grandes que provocan tiempos de espera
|
|
|
|
**Soluciones:**
|
|
|
|
1. Revisa la sintaxis del archivo para detectar errores de formato de MDX.
|
|
2. Verifica que el archivo exista en tu repositorio.
|
|
</Accordion>
|
|
</AccordionGroup>
|
|
|
|
<div id="next-steps">
|
|
## Próximos pasos
|
|
</div>
|
|
|
|
* Aprende conceptos fundamentales de [Git](/es/guides/git-concepts)
|
|
* Aprende las mejores prácticas para colaborar con [branches](/es/guides/branches) |