Issue #383💬 RespondidoAbierto el 5 de octubre de 2017por daniel-farinaReacciones 1

La mejor forma de cargar el CSS de Element en el panel de propiedades.

Respuesta rápidapor daniel-farina1

@artf ahora lo entiendo ! imagen No me pasé por alto la casilla de verificación junto a cada selector. ¡Poner la forceClass en false soluciona todos mis problemas! Realmente no necesito eso porque mantengo el código fuente extremadamente sencillo con la menor cantidad de divs posible. ¡Muchas gracias por eso! Dan

Lee la respuesta completa abajo ↓

Pregunta

Hola de nuevo a todos,

GrapeJS es demasiado divertido una vez que te metes de lleno. Tengo una pregunta sencilla:

¿Cuál es la mejor manera de cargar el CSS desde un elemento recién creado al panel de propiedades?

Por ejemplo, tengo la siguiente caja que tiene un fondo negro:

! imagen

El fondo negro proviene del estilo en el elemento

...
 Contenido: '
              <clase div="col-8" estilo="color de fondo: rgba(0,0,0,0,70); relleno:40px;" 
...

El editor convierte la etiqueta de estilo en una clase como se muestra aquí:

! imagen

Sin embargo, el panel de propiedades no tiene un conjunto de fondo: ! imagen

Ahora cambio el color a naranja oscuro: ! imagen

Creará una nueva clase para ella que sobrescribirá la anterior:

! imagen

¡Gracias de antemano por cualquier opinión!

Respuestas (3)

daniel-farina6 de octubre de 2017

@artf ahora lo entiendo ! imagen

No me pasé por alto la casilla de verificación junto a cada selector. ¡Poner la forceClass en false soluciona todos mis problemas! Realmente no necesito eso porque mantengo el código fuente extremadamente sencillo con la menor cantidad de divs posible. ¡Muchas gracias por eso!

Dan

daniel-farina5 de octubre de 2017

Descubrí que si el div no tiene clase y solo style, entonces se crea una única clase y el fondo se aplica al panel de propiedades:

! imagen

! imagen

Así que esa sería una solución parcial por ahora, pero sigo buscando una mejor alternativa.

artf5 de octubre de 2017

Hola @daniel-farina no ves el fondo de '.c1019' porque tu componente tiene dos clases, así que, por defecto, el Style Manager selecciona la regla CSS donde el selector es una combinación de todas sus clases, en tu caso '.col-8.c1019'. Si quieres ver los estilos de '.c1019', simplemente puedes desseleccionar '.col-8' ! schermata 2017-10-05 alle 13 11 54

También puedes evitar la generación automática de clases si quieres '''js grapesjs.init({ ... forceClass: false })

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 →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

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