Issue #1388✓ ResueltoAbierto el 27 de agosto de 2018por froderfReacciones 3

Actualizar el estilo del componente seleccionado

Respuesta rápidapor artf2

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...

Respuestas (3)

👍 Muy útilartf2 de septiembre de 2018

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; }

artf5 de septiembre de 2018

@froderf cuando haces '.setStyle(content );' 'content' debería ser un objeto como '{ color: 'red' }' y no una cadena con también el selector

froderf29 de agosto de 2018

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.

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.