Añadir nueva clase programáticamente
@wemod123 'editor.getWrapper().addClass('my-class')'
Lee la respuesta completa abajo ↓Pregunta
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)
@wemod123 'editor.getWrapper().addClass('my-class')'
@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);
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.
Issue #2989
Cómo añadir botón en una división personalizada
Hola @artf ¿Hay alguna forma de añadir todos los botones predeterminados de grapesjs en un div personalizado, igual que lo hacemos con el g...
Issue #2426
[Pregunta] ¿Cómo manejar componentes antiguos (json) con una nueva configuración de editor?
Hola @artf, Tengo una pregunta sobre el editor de uvas que no encuentro en la documentación, así que espero que tengas una respuesta. Confi...
Issue #404
Cambiar las propiedades de CSS en un componente con una clase existente modifica esa clase en lugar de añadir una nueva
Puedes ver esto en acción en la demo (http://grapesjs.com/demo.html). Selecciona uno de los elementos de navegación (por ejemplo, 'Web'); t...
Issue #3727
Problema sobre la importación de estilos
Hola @artf, Describe el error con detalle Mientras creaba una nueva plantilla usando GrapesJS, me encontré con un escenario en el que, cuan...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
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 →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.