Issue #3247💬 RespondidoAbierto el 24 de enero de 2021por fmayReacciones 1

Pregunta: Rasgos

Respuesta rápidapor artf❤ 1

Hola Freddy, en este caso puedes simplemente ampliar el componente de imagen '''js editor. Components.addType('image', { modelo: { Predeterminados: { Rasgos: [{Nombre: 'Alt'}, {Nombre: 'SRC'}, {Nombre: 'ID'}] } } }); ```

Lee la respuesta completa abajo ↓

Pregunta

Hola @artf - lo que has construido es magnífico. Ha sido una lucha suave porque estoy lejos de ser un mago de JS. Sin embargo, tengo casi todo configurado, ¡excepto esto!

Quiero establecer rasgos que se muestren cuando se selecciona una imagen (alt, src, id). Estoy seguro de que se puede hacer una vez al inicializar, pero estoy perdido si consigo averiguar cómo hacerlo. He leído todo lo que he encontrado en los números y sigo atascado.

La única forma de que funcione es la siguiente...

  Establece los rasgos para <img>
  editor.on('component:selected', function(a) {
    const component = editor.getSelected()
    if( component.attributes.tagName === 'img' ) {
      if( !component.getTrait('alt')) component.addTrait( { nombre: 'alt' } )
      if( !component.getTrait('src')) component.addTrait( { nombre: 'src' } )
      if( !component.getTrait('id')) component.addTrait( { nombre: 'id' } )
    }
  })

Además, el "Alt" fuera de lo común viene primero y me gustaría mucho que fuera después de "src'''. No consigo averiguar cómo deshacerme de él porque '''removeTrait()''' no parece funcionar.

Aunque mi solución funciona, me encantaría saber cómo debería hacerse.

¡Muchas gracias!

Respuestas (2)

artf• 28 de enero de 2021

ClaudeCode• 17 de mayo de 2026

Gracias por informar de esto, @fmay.

Buena pregunta sobre Pregunta: Rasgos. El enfoque recomendado con Componentes es utilizar 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!