Explorar por categoría
GrapesJS Mandos
Los plugins de comandos de GrapesJS añaden acciones personalizadas, atajos de teclado y botones de barra de herramientas al editor. Los comandos son la columna vertebral de la interacción en GrapesJS: estos plugins amplían el conjunto por defecto con acciones de exportación, conmutadores de paneles, mejoras del deshacer y automatizaciones de flujo de trabajo. Explora extensiones de comandos de la comunidad y premium para adaptar el comportamiento del editor a tu aplicación.
Sobre GrapesJS Mandos
Los comandos de GrapesJS son la vía principal para disparar acciones del editor mediante código o como respuesta a la interacción del usuario. Cada botón de la barra de herramientas, atajo de teclado y elemento del menú contextual de GrapesJS invoca por su nombre a un comando registrado. Los plugins de comandos en GJS.Market amplían el conjunto por defecto de varias formas. Los packs de atajos registran combinaciones de teclas para acciones habituales —deshacer, rehacer, seleccionar todo, copiar componente, pegar en el sitio y mover arriba o abajo en la jerarquía de capas— que no vienen asignadas de serie. Los plugins de comandos de exportación añaden a la barra las acciones Exportar HTML, Exportar ZIP, Copiar al portapapeles y Previsualizar en una pestaña nueva. Los comandos de conmutación de paneles muestran y ocultan paneles concretos mediante código, algo útil para modos de editor simplificados. Los plugins de comandos avanzados implementan flujos de varios pasos, como un comando Publicar que valida, exporta y envía a una API en secuencia. Todos los plugins de comandos de GJS.Market incluyen una referencia de API con la cadena del nombre del comando para usarla en tus propias llamadas a GrapesJS.runCommand().
GrapesJS Mandos — Preguntas frecuentes
- ¿Qué es un comando de GrapesJS?
- Un comando es una acción con nombre registrada en el editor. Cada botón de la barra, atajo de teclado y elemento del menú contextual acaba resolviéndose en uno, y puedes disparar cualquiera con editor.runCommand('nombre'). Los comandos son la costura entre la interfaz y el comportamiento del editor; por eso cambiar lo que hace un botón suele implicar registrar un comando en lugar de parchear el DOM.
- ¿Cómo registro un comando personalizado?
- Llama a editor.Commands.add con un id y un objeto con un método run —y un método stop si el comando tiene estado, como alternar un panel—. Los valores devueltos por run llegan a quien lo invocó, de modo que un comando puede funcionar además como una pequeña API. Envuelve el registro en un plugin para reutilizarlo entre proyectos.
- ¿Cómo añado atajos de teclado en GrapesJS?
- Usa la API Keymaps: editor.Keymaps.add asocia una combinación de teclas al id de un comando. GrapesJS solo trae un conjunto mínimo por defecto, y de ahí que existan los packs de atajos de esta categoría: añaden deshacer, rehacer, seleccionar todo, duplicar, pegar en el sitio y navegación por capas. Enlaza a comandos, no a manejadores, para que la misma acción siga siendo accesible desde la barra.
- ¿Cómo exporto HTML y CSS desde GrapesJS?
- editor.getHtml() y editor.getCss() devuelven la página actual como cadenas, y el comando integrado export-template las muestra en un modal. Los plugins de esta categoría van más allá: Exportar ZIP empaqueta HTML, CSS y recursos en un archivo descargable, Copiar al portapapeles se salta el modal y Previsualizar en pestaña nueva renderiza la salida de forma independiente.
- ¿Puede un comando ejecutar un flujo de publicación de varios pasos?
- Sí, y es el sitio más limpio para colocarlo. El método run puede ser asíncrono, así que un comando Publicar puede validar la página, llamar a getHtml y getCss, hacer POST a tu API e informar del resultado, todo detrás de un único botón. Al ser un comando con nombre, ese mismo flujo queda accesible desde un atajo, desde tu propio código o desde una prueba automatizada.
Explorar por etiqueta