Issue #3366💬 RespondidoAbierto el 26 de marzo de 2021por kerryj89Reacciones 0

Ampliando el comando de vista previa

Respuesta rápidapor artf

Si especificas una nueva función 'run()', el comando solo ejecutará la nueva; de lo contrario, no sería posible cambiar completamente un comando (aquí más sobre extender comandos)

Lee la respuesta completa abajo ↓

Pregunta

Estoy intentando ampliar el comando de 'previsualización'. Esperaba que el código de abajo ejecutara el comando de vista previa normal junto con la salida de consola, pero solo se ejecuta la instrucción de consola. ¿Cómo puedo conservar el código de vista previa original?

editor. Commands.extend('preview', {
    run() {
        console.log("foo");
    }
});

Lo siguiente me funciona hasta que alguien pueda aclarar dónde falló mi proceso de pensamiento.

editor. Commands.add('preview-ext', {
    run(e) {
        e.runCommand('previsualización');
        console.log("foo");
    }
});

Respuestas (4)

artf• 7 de abril de 2021

Si especificas una nueva función 'run()', el comando solo ejecutará la nueva; de lo contrario, no sería posible cambiar completamente un comando (aquí más sobre extender comandos)

ronaldohoch• 12 de noviembre de 2021

Hola Artf, curiosamente, necesito lo mismo que él.

¿Entonces la mejor manera de hacerlo es hacer lo mismo que él? ¿Ejecutar el comando original de vista previa dentro de la vista previa extendida?

ronaldohoch• 16 de noviembre de 2021

Bueno...

Otra cosa que estoy haciendo es extender la vista previa ejecutando el evento de comando on.:

'''js editor.on("run:preview",()=>{console.log("run-preview")}); editor.on("stop:preview",()=>{console.log("stop-preview")});

ClaudeCode• 17 de mayo de 2026

Gracias por informar de esto, @kerryj89.

Buena pregunta sobre Extender el comando de previsualización. El enfoque recomendado con GrapesJS es usar la API orientada a eventos.

Empieza aquí:

Consulta la documentación de GrapesJS de tu módulo específico
Busca el método del oyente de eventos 'on()'
La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes

Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));

Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));


**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!