La función de parada de todos los comandos se ejecuta antes del comando de ejecución real.
Hola @slellampati, Siento que esta respuesta llegue un poco tarde, pero acabo de toparme con el mismo comportamiento y descubrí este problema. Para responder a la pregunta: los botones de GrapesJS tienen un 'active' event listener, que desactiva todos los botones de un panel en el que se activa un botón, haciendo que...
Lee la respuesta completa abajo ↓Pregunta
Creé 3 botones personalizados (editar, previsualizar, guardar) y todos esos tienen métodos de ejecutar y parar. Cuando hago clic en cualquier botón, se activa el comando de correr de ese botón, pero antes de que se ejecute la función de detención de otros botones.
Botón de editar código
panelManager.addButton('options', {
id: 'Edit-Code',
NombreClase: 'fa fa-edit',
Orden: {
@ts-ignorar
run(editor: GrapesJS, remitente: {}) {
log.debug('Edición abierta');
},
stop(editor: GrapesJS) {
log.debug('Editar completado');
}
},
atributos: { título: 'Editar código' },
activo: falso
});
Añadir botón de vista previa
panelManager.addButton('options', {
id: 'previsualización personalizada',
etiqueta: 'Avance',
Orden: {
@ts-ignorar
run(editor: GrapesJS, remitente: {}) {
log.debug('Edición abierta');
},
stop(editor: GrapesJS) {
log.debug('Editar completado');
}
},
atributos: { título: 'Vista previa' },
activo: falso
});
Añadir botón de guardado
panelManager.addButton('options', {
id: 'guardar',
etiqueta: 'Guardar',
Orden: {
run(editor: GrapesJS) {
log.debug('guardado');
},
stop(editor: GrapesJS) {
log.debug('Guardar completado');
}
},
atributos: { título: 'Guardar' },
activo: falso
});
Cuando hago clic en Editar, abajo está la salida de la consola
[Plantilla de correo electrónico] Avance de parada
[Plantilla de correo electrónico] Guardar completado
[Plantilla de correo electrónico] Edición abierta
Cuando se cierra el botón de Editar (comando de detenerse)
[Plantilla de correo electrónico] Edición completada
¿Qué está haciendo que los otros comandos de parada se activen primero aunque no tenga ningún escuchador de eventos?
Respuestas (2)
Hola @slellampati,
Siento que esta respuesta llegue un poco tarde, pero acabo de toparme con el mismo comportamiento y descubrí este problema.
Para responder a la pregunta: los botones de GrapesJS tienen un 'active' event listener, que desactiva todos los botones de un panel en el que se activa un botón, haciendo que sus comandos de parada
Empecé una discusión similar sobre otro tema, por si te interesa tener más detalles.
¡Saludos :)
Puedes añadir un 'contexto' diferente: por ejemplo, save-button" a tus botones para separarlos de este comportamiento predeterminado (por defecto los botones comparten el mismo contexto)
De hecho, hay una referencia pequeña en la guía para empezar sobre esto: https://grapesjs.com/docs/getting-started.html#panels-buttons
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1127
Comandos ejecutándose varias veces
Hola a todos, Necesito tu ayuda. Creé un botón personalizado en el panel de comandos para publicar el sitio creado desde Grapes. Cuando hag...
Issue #690
Error del comando de previsualización: salir del modo de vista previa ejecutará el comando sw-visiblety, cuando la sw-visibility se detenga antes de pasar al modo de previsualización.
Hola @artf, El caso es el comando "cambiar visibilidad" detenido, luego haz clic en el botón de vista previa o activa el comando de previsu...
Issue #1993
[PREGUNTAS] es cualquier forma de almacenar el id html con su componente cuando hago clic en guardar
Hola. Sé que los grapesjs generarán el id único para cada HTML. cuando guardo ese HTML y CSS. el ID HTML no está almacenado en mi base de d...
Issue #3362
Problema del doble clic
grapesjs - 0.16.105 Cuando hago clic en un elemento (forma - este elemento tiene desactivar clonación), el siguiente segundo elemento (colu...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.