Actualizar el estilo del componente seleccionado
Vale, si seleccionas un elemento así: '<div id="inul" class='class1'>Hola</div>' Tienes estas opciones:Utiliza 'editor.getSelected().setStyle({ color: 'red' })' para cambiar solo el estilo de componente seleccionado, de modo que obtendrás: '''css #inul { color: rojo; }
Lee la respuesta completa abajo ↓Pregunta
Estoy intentando actualizar el CSS del elemento seleccionado.
Ejemplo:
Elemento seleccionado:
'<div id="inul" class='class1'>Hola</div>'
el código anterior se devolvió desde component.toHTML();
CSS:
`
.class1{
Color de fondo: negro;
}
`
El código CSS anterior fue devuelto desde el editor. CodeManager.getCode(component, 'css', {cssc: editor. CssComposer});
Usé textarea aquí (por ejemplo) y edito el código CSS y cuando pulso el botón de guardar, ejecuto el código de abajo
'editor.getSelected().em.set('style', content);'
El resultado no es lo que debería ser, vuelve
`
#inul {
0: .;
1: w;
2: o;
3: o;
4: m;
5: re;
6: a;
7: 1;
8: 9;
9: 4;
10: 5;
11: {
;
12: ;
13: ;
14: ;
15: ;
16: ;
17: b;
18: a;
19: c;
20: k;
21: sol;
22: r;
23: 0;
24: u;
25: n;
26: d;
27: -;
28: c;
29: 0;
30: L;
31: o;
32: r;
33: :;
34: ;
35: b;
36: L;
37: a;
38: c;
39: k;
40: ;
;
41: ;
42:
}
;
}
`Respuestas (3)
Vale, si seleccionas un elemento así: '<div id="inul" class='class1'>Hola</div>'
Tienes estas opciones:
- Utiliza 'editor.getSelected().setStyle({ color: 'red' })' para cambiar solo el estilo de componente seleccionado, de modo que obtendrás: '''css #inul { color: rojo; }
2. Cambiar el estilo de regla CSS seleccionado (si existe) usando 'editor.getSelectedToStyle().setStyle({ color: 'red' })', en ese caso el resultado es
'''css
.class1 {
color: rojo;
}
@froderf cuando haces '.setStyle(content );' 'content' debería ser un objeto como '{ color: 'red' }' y no una cadena con también el selector
Lo que necesito aquí es algo así como 'Editor. CodeManager.setCode(component, 'css', {cssc: editor. CssComposer});'
que actualizan el estilo del componente seleccionado
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2461
Cómo aplicar estilo o rasgo al elemento padre o hijo del componente seleccionado
Por ejemplo, tengo una imagen componente que se envuelve en div. Quiero estilizar la imagen con múltiples propiedades (posición horizontal,...
Issue #2549
[PREGUNTA] Actualizar vista de componentes al cambiar la propiedad
Hola a todos, Estoy intentando crear un componente que actualice su vista en función del valor de una propiedad '''javascript editor. DomCo...
Issue #3512
Los elementos hijos no se pueden arrastrar, se pueden soltar y se pueden resaltar. también el CSS de todos los elementos hijos que no se insertan en la sección de estilo mientras se desarrolla un componente banner en un plugin
Hola @artf, Estoy intentando desarrollar un plugin sencillo para banners que incluya un encabezado, un subtítulo y un enlace. y cada elemen...
Issue #2917
BUG: Style Manage no oculta los bloques de estilo
Hola @artf, estoy intentando ocultar propiedades de estilo basándome en el elemento seleccionado. por ejemplo, cuando arrastro y suelto una...
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.