Issue #510✓ ResueltoAbierto el 12 de noviembre de 2017por asvine-pReacciones 6

Añadir nueva clase programáticamente

Respuesta rápidapor artf4

@wemod123 'editor.getWrapper().addClass('my-class')'

Lee la respuesta completa abajo ↓

Pregunta

Fragmento de códigoTEXT
Hola Artf,

Quiero editar los estilos de los componentes (principalmente HTML importado) sin modificar todos los componentes con la misma clase. Intenté añadir una clase con nombre aleatorio de forma programática así:
`
      this.editor.on('component:selected', function(model) {
si (model && model.length > 2) {
                const uuid = this.s4(); generar un nuevo nombre de clase aleatorio

selector const = {
                    Nombre: UUID,
                    Tipo: 'Clase',
                    etiqueta: UUID,
                };

model[1].attributes.classes.push(selectorManager.get(uuid));
     sean mClasees = model[1].atributos.clases;
             const uuid = this.s4();
             selector const = {
                 Nombre: UUID,
                 Tipo: 'Clase',
                 etiqueta: UUID,
             };
          mClasees.push (selector);

}.vinculado(esto));
`

Esto añade una clase programática al componente, pero parece que no me dejo editar su estilo. 

Solo quiero poder cambiar el estilo de un solo componente sin preocuparme de a qué clase pertenezca. Si copio y pego un componente, quiero poder editar cada componente individualmente.
Espero que eso quede claro. Si necesitas más información, no dudes en preguntarme :) 
¡Gracias por tu ayuda!

Respuestas (3)

👍 Muy útilartf2 de enero de 2020

@wemod123 'editor.getWrapper().addClass('my-class')'

artf13 de febrero de 2019

@IrinaCodixis de la https://github.com/artf/grapesjs/releases/tag/v0.14.52 hemos añadido métodos 'setRule'/'getRule', así que para añadir algunas reglas CSS programáticamente deberías hacer esto: '''js editor. CssComposer.setRule('.some-class', { color: 'red' })

Eliminar regla const = editor. CssComposer.getRule('.some-class'); editor. CssComposer.getAll().remove(rule);

artf14 de noviembre de 2017

Te refieres a algo como 'model.set('style', {...})`? Esto añade un estilo en línea al componente

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.