Hola 👋 ¡Me encanta el editor! Estamos usando rasgos para modificar las clases que tiene un componente, pero eso resulta un poco forzado porque tienes que reafirmar TODOS los nombres de clase para cada selección de rasgos Aquí tienes un ejemplo sencillo: Cada opción de rasgo debe tener todas las clases definidas, porque si no, eliminará cualquier clase existente. Esto parece la forma equivocada de hacerlo, pero no hemos conseguido encontrar ninguna otra forma integrada de modificar las clases d...

Gracias por informar de esto, @deiga. Buena pregunta sobre [PREGUNTA] ¿Cuál es la forma idiomática de añadir y eliminar clases de componentes?. 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...

Issue #3541💬 RespondidoAbierto el 15 de junio de 2021por deigaReacciones 0

question components documentation typescript

¿Cuál es la forma idiomática de añadir y eliminar clases de los componentes?

Respuesta rápidapor krishnaeverestengineering

@deiga estamos haciendo algo así.

Lee la respuesta completa abajo ↓

Pregunta

Hola 👋 ¡Me encanta el editor!

Estamos usando rasgos para modificar las clases que tiene un componente, pero eso resulta un poco forzado porque tienes que reafirmar TODOS los nombres de clase para cada selección de rasgos

Aquí tienes un ejemplo sencillo:

{
    tipo: 'select',
    etiqueta: 'Accent',
    Nombre: 'Clase',
    Opciones: [
        {valor: 'botón botón-primario-verde botón-pequeño', nombre: 'Principal verde pequeño'},
        {valor: 'botón-botón secundario-verde botón-pequeño', nombre: 'Secundario verde pequeño'},
        {valor: 'botón botón-terciario-verde botón-pequeño', nombre: 'Terciario verde pequeño'},
        {valor: 'botón', nombre: '---'},
        {valor: 'botón botón-botón primario-verde botón-medio', nombre: 'Medio verde primario'},
        {valor: 'botón botón secundario-verde botón-medio', nombre: 'medio secundario verde'},
        {valor: 'botón botón-terciario-verde botón-medio', nombre: 'terciario verde medio'},
    ]
}

Cada opción de rasgo debe tener todas las clases definidas, porque si no, eliminará cualquier clase existente. Esto parece la forma equivocada de hacerlo, pero no hemos conseguido encontrar ninguna otra forma integrada de modificar las clases de un componente.

¿Cuál sería la forma correcta de hacerlo?

Respuestas (3)

krishnaeverestengineering• 19 de junio de 2021

@deiga estamos haciendo algo así.

{
      Valores predeterminados: ->
        {
          Nombre: Tipo
          Tipo: Tipo
          etiquetaNombre: 'div'
          socialElement: 'web'
          iconos: {
            twitter: 'fa-twitter-square'
            LinkedIn: 'FA-Linkedin-Square'
            web: 'fa-globe'
          }
          componentes: {
            Tipo: 'enlace'
            Barra de herramientas: []
          }
          atributos: {
            'clase': "social_element fa fa-twitter-cuadrado"
          }
          Rasgos: [
            {
              Tipo: 'select'
              etiqueta: 'Icon'
              nombre: 'socialElement'
              cambioprop: 1
              Opciones: []
            }, {
              Nombre: 'Href'
              cambioprop: 1
            }
          ]
        }

Init: ->
        this.listenTo(this, 'change:href', @onSocialUrlChange.bind(this))
        this.listenTo(this, 'change:socialElement', @onSocialIconChange.bind(this))

@initSettings()
        @updateTraitValues()

actualizaciónValoresRasgo: ->
        @_initSocialIcon()

_initSocialIcon: ->
        iconos = @attributes.iconos
        Clases = @getClasses()
        icono = ''
        Para CL en las clases
          icon = Object.keys(icons).find((key) -> icons[key] == cls)
          Icono de romper si

this.set('socialElement', icono || 'twitter')

initSettings: ->
        iconos = @attributes.iconos
        @updateTrait('socialElement', {
          Opciones: [
            { id: 'twitter', nombre: 'Twitter', valor: 'twitter' },
            { id: 'linkedin', nombre: 'Linkedin', valor: 'linkedin'},
            { id: 'web', nombre: 'web', valor: 'web' }
          ]
        })

onSocialIconChange: (modelo, valor) ->
        newClassSet = ['social_element', 'fa']
        model.setClass(newClassSet.concat(@attributes.icons[value]))
    }

artf• 24 de junio de 2021

Adjuntaría el rasgo a alguna propiedad componente en lugar del atributo clase, y según el valor que usaría correctamente removeClass y addClass

ClaudeCode• 17 de mayo de 2026

Gracias por informar de esto, @deiga.

Buena pregunta sobre [PREGUNTA] ¿Cuál es la forma idiomática de añadir y eliminar clases de componentes?. 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!