Manual Editor

Manual de Usuario

1.0

La configuración del menú puede variar o algunas funciones pueden no ser compatibles según la versión del producto.

Copyright © 2026, Innodep Inc. All Rights Reserved

Índice

01

Comenzar con Manual Editor

Manual Editor es una herramienta para editar contenido de manual basado en YAML y sincronizarlo con Sanity CMS.

Acceder a Manual Editor

Aprenda cómo acceder al Manual Editor.

  1. Abrir URL de Manual Editor en el navegador
    Desarrollo: http://localhost:3010/admin/manual-editor Producción: https://your-domain.com/admin/manual-editor
  2. Seleccionar producto
    Seleccione el producto del manual a editar desde el menú desplegable de productos en el encabezado.
  3. Seleccionar sección
    Haga clic en el archivo de sección para editar desde la barra lateral izquierda.

Modos de editor (YAML / Form)

Manual Editor proporciona dos modos de edición.

Modo YAML
Modo YAML edita el archivo YAML original directamente.
  • Ver toda la estructura del archivo de un vistazo
  • Bueno para ediciones masivas rápidas
  • Adecuado para usuarios familiarizados con la sintaxis YAML
  • Los archivos _product.yaml solo se pueden editar en modo YAML
Modo Formulario
Modo Formulario edita usando una interfaz de formulario visual.
  • Editar con interfaz intuitiva
  • Reordenar con arrastrar y soltar
  • Selector de imágenes incorporado
  • Vista previa en tiempo real
  • Solo admite archivos de sección (excluye _product.yaml)

Función de guardado automático

Manual Editor proporciona funcionalidad de guardado automático.

Comportamiento del guardado automático
  • Guardado automático después de 2 segundos: Después de editar, si no hay entrada durante 2 segundos, el archivo se guarda automáticamente.
  • Guardado inmediato al cambiar de sección: Al cambiar a otra sección, los cambios en la sección actual se guardan inmediatamente.
  • Visualización del estado de guardado: Puede verificar las secciones no desplegadas con el punto amarillo (🟡) en la barra lateral.
02

Editar contenido

Aprenda a editar secciones y contenido en modo Formulario, incluida Información del documento y el índice automático de subsecciones.

Agregar una nueva sección

Aprenda a crear un nuevo archivo de sección.

  1. Haga clic en el botón +
    Haga clic en el botón "+" en la parte superior de la barra lateral.
  2. Ingresar información de la sección
    Ingrese la siguiente información en el modal:
    • Orden: Solo números (ej., "3" → el número se genera como 03)
    • Información del documento (sin numeración): Marque para notas de versión, avisos legales, etc.
    • Slug: Solo letras minúsculas, números y guiones (ej., "new-feature")
    • Título: Ingrese título multilingüe
  3. Creación completada
    Haga clic en el botón ✅ para crear el nuevo archivo de sección, que se seleccionará automáticamente.

Agregar subsección

Aprenda a agregar una subsección dentro de una sección.

  1. Haga clic en el botón + Agregar subsección
    En modo Formulario, haga clic en el botón "+ Agregar subsección".
  2. Ingresar información de la subsección
    Ingrese la siguiente información para la subsección:
    • ID: Identificador único (ej., "feature-overview")
    • Título: Título multilingüe
    • Descripción: Descripción multilingüe (opcional)

Agregar contenido

Aprenda a agregar Step Guide, InfoBox, Screenshot y Table a las subsecciones.

Tipos de contenido
Manual Editor admite los siguientes 4 tipos de contenido: 1. Step Guide: Guía paso a paso (puede incluir imágenes) 2. InfoBox: Caja de información (info, warning, tip, danger) 3. Screenshot: Imagen de captura de pantalla 4. Table: Tabla (manualTable)
  1. Expandir subsección
    Haga clic en la subsección para expandirla donde desea agregar contenido.
  2. Seleccionar tipo de contenido
    Haga clic en el botón "+ Agregar contenido" y seleccione el tipo de contenido deseado.
  3. Editar contenido
    Ingrese los campos según el tipo de contenido seleccionado.

Reordenar con arrastrar y soltar

Puede reordenar subsecciones y contenido arrastrando y soltando.

  1. Arrastrar elemento
    Haga clic y arrastre la subsección o elemento de contenido que desea mover.
  2. Soltar en la ubicación objetivo
    Arrastre a la ubicación deseada y suelte el mouse para cambiar el orden.

Área de información del documento

Use el área de Información del documento para notas de versión, avisos legales y licencias de código abierto. Aparece debajo del Índice en la portada del producto, sin números de sección.

  1. Abrir un archivo de sección (no _product.yaml)
    La Información del documento no se configura en _product.yaml. Cree o abra un archivo YAML de sección (ej., 90-release-notes.yaml, 08-reference.yaml).
  2. Activar Información del documento (sin numeración)
    En modo Formulario, abra Información de sección y marque Información del documento (sin numeración). O en modo YAML, configure: ``yaml section: number: "" slug: release-notes order: 90 unnumbered: true title: ko: 릴리즈 노트 en: Release Notes ``
  3. Verificar la vista previa de la portada
    Tras guardar y sincronizar con Sanity, la sección aparece en Información del documento en la portada (debajo del Índice), sin número. Los capítulos numerados permanecen en Índice; las secciones sin numeración van a Información del documento.
Consejos
  • Seleccione _product.yaml en la barra lateral para previsualizar la portada (Índice + Información del documento).
  • Secciones existentes como "Referencia / Aviso legal" se pueden mover activando Información del documento en ese archivo.
  • El orden sigue controlando la clasificación; solo se oculta el número.

Índice automático de subsecciones

Cuando una sección tiene 3 o más subsecciones, se genera automáticamente un índice de enlaces de título en la parte superior de la página.

Cómo funciona
Comportamiento
  • Se muestra solo con 3 o más subsecciones
  • Lista títulos de subsección como enlaces en la página
  • Al hacer clic, se desplaza a esa subsección (#id)
  • No hay que editar el índice a mano — usa los títulos de cada subsección
Consejo: Complete el ID de cada subsección (ej., feature-overview). El ID es el ancla del enlace.
Nota
Con menos de 3 subsecciones, el índice se oculta para no saturar secciones cortas.
03

Carga de imágenes y despliegue

Aprenda a cargar imágenes y desplegar cambios en el servidor.

Cargar imágenes

Aprenda a cargar imágenes en Manual Editor.

  1. Abrir selector de imágenes
    En modo Formulario, haga clic en el botón "📷 Seleccionar imagen" junto al campo de imagen.
  2. Cargar imagen
    En el modal del selector de imágenes: 1. Haga clic en el botón "📤 Cargar" 2. Seleccione el archivo de imagen para cargar 3. Después de completar la carga, seleccione de la lista de imágenes
  3. Establecer imágenes multilingües
    En el selector de imágenes, seleccione las pestañas de idioma (🇰🇷 Coreano, 🇺🇸 Inglés, 🇯🇵 Japonés, 🇪🇸 Español) para establecer diferentes imágenes para cada idioma.

Verificar estado de sincronización

Aprenda a verificar el estado de sincronización entre archivos YAML y Sanity CMS.

Icono de estado de sincronización
Puede verificar el estado actual con el icono de estado de sincronización en el encabezado:
  • ✅ Sincronizado: YAML y Sanity coinciden
  • ⚠️ Tiene diferencias: Algunos campos difieren
  • ❌ No desplegado: Documento no está en Sanity
  • 🔄 Verificando: Verificando estado
Indicador de barra lateral
En la lista de secciones de la barra lateral:
  • Punto amarillo (🟡): Sección no desplegada en el servidor
  • Ninguno: Sección desplegada en el servidor
Las secciones con puntos amarillos deben desplegarse haciendo clic en el botón "Despliegue del servidor".

Desplegar en el servidor

Aprenda a sincronizar cambios con Sanity CMS y desplegar en el servidor.

  1. Verificar cambios
    Verifique que sus ediciones se hayan guardado automáticamente. (Guardado automático después de 2 segundos o al cambiar de sección)
  2. Haga clic en el botón de despliegue del servidor
    Haga clic en el botón "🚀 Despliegue del servidor" en el encabezado.
    • Aparecerá una superposición de carga de pantalla completa
    • La sincronización con Sanity CMS procederá
    • Los resultados se mostrarán en un mensaje toast cuando se complete
  3. Git Commit (Opcional)
    Haga clic en el botón "▼" junto a "🚀 Despliegue del servidor" para seleccionar "Desplegar + Commit". Para realizar Git Commit: 1. Ingrese nombre de usuario y correo electrónico de Git 2. Ingrese mensaje de commit 3. Haga clic en el botón "🚀 Desplegar + Commit"
Notas importantes
  • El despliegue del servidor se realiza solo para la sección actualmente abierta.
  • Git Commit también incluye solo el archivo de sección actual y todas las imágenes de ese producto.
  • Se recomienda verificar el estado de sincronización antes del despliegue para asegurarse de que no haya diferencias.
04

Consejos y funciones avanzadas

Aprenda consejos y funciones avanzadas para usar Manual Editor de manera más eficiente.

Atajos de teclado

Aprenda los atajos de teclado disponibles en Manual Editor.

단축키기능설명
Ctrl + S저장현재 파일 저장 (자동 저장과 동일)
Ctrl + Z실행 취소YAML 모드에서만 사용 가능
Ctrl + Y다시 실행YAML 모드에서만 사용 가능
Ctrl + F찾기YAML 모드에서 텍스트 검색

Usar formato Markdown

Puede usar la sintaxis Markdown en los campos de texto para aplicar formato.

Sintaxis Markdown admitida
  • Negrita: **texto**
  • Cursiva: *texto*
  • Código: ` código `
  • Tachado: ~~texto~~
  • Enlace: [texto](https://...)
  • Teclado: {{kbd:Ctrl+S}}
  • Icono: {{icon:house}}

Eliminar contenido

Aprenda a eliminar secciones, subsecciones y contenido.

Confirmación de eliminación
Todas las operaciones de eliminación muestran un modal de confirmación.
  • Eliminar Sección: botón 🗑️ en la barra lateral
  • Eliminar Subsección: botón 🗑️ en el encabezado de la subsección
  • Eliminar Contenido: botón 🗑️ en el elemento de contenido
  • Eliminar Paso: botón 🗑️ en el paso de Step Guide
La eliminación no se puede deshacer, así que tenga cuidado.

Mejores prácticas

Aprenda las mejores prácticas para usar Manual Editor de manera eficiente.

Recomendaciones
1. Editar en unidades pequeñas: No haga demasiados cambios a la vez, edite sección por sección. 2. Usar guardado automático: Se guarda automáticamente después de 2 segundos, por lo que no necesita presionar guardar. 3. Verificar vista previa: Use la vista previa del lado derecho en modo Formulario para verificar los resultados en tiempo real. 4. Verificar estado de sincronización: Antes del despliegue, verifique el icono de estado de sincronización para asegurarse de que no haya diferencias. 5. Optimizar imágenes: Optimice las imágenes a un tamaño apropiado antes de cargarlas. 6. Entrada multilingüe: ko y en son obligatorios, así que asegúrese de ingresarlos. 7. Separar Información del documento: Notas de versión, avisos legales y licencias van en secciones Información del documento (sin numeración) — no en _product.yaml. 8. IDs de subsección: Con 3+ subsecciones aparece un índice automático — use IDs significativos para los anclajes.