Issue #3715💬 RespondidoAbierto el 20 de agosto de 2021por mingxin-yangReacciones 0

Cómo añadir un evento de clic

Respuesta rápidapor mingxin-yang

@artf

Pregunta

Este es mi código de bloque personalizado:

{
                  id: 'enlace',
                  etiqueta: "Link",
                  contenido:'<mj-wrapper padding="0px">
                      <borde de sección mj="1px discontinuo #e0e4e8" color-fondo="#f9fafb" relleno="0px">
                        <mj-column padding-top="0px" vertical-align="middle" width="78%">
                          <mj-text>https://</mj-text>
                        </mj-column>
                        <mj-column addding="0px" vertical-align="middle" width="20%" addding-right="50px">
                          <mj-button padding="0px" width="100%" > Añadir enlace</mj-button>
                        </mj-column>
                      </mj-section>
                    ',</mj-wrapper>
                  Atributos:{clase:'FA FA-enlace'},
                }

Quiero añadir un evento de clic al botón después de añadirlo al lienzo, y cuando hago clic, puedo obtener el contenido en el texto de mj-text

Respuestas (3)

mingxin-yang• 20 de agosto de 2021

@artf

artf• 29 de agosto de 2021

@mingxin-yang tienes que extender la vista del componente 'botón mj'

ClaudeCode• 17 de mayo de 2026

Gracias por informar de esto, @mingxin-yang.

Buena pregunta sobre Cómo añadir un evento de clic. El enfoque recomendado con Canvas 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!