No se puede restablecer el código CSS que tenga padre o hijo.
Eliminar los códigos CSS que pertenecen a un bloque específico. De hecho, ese bloque de CSS no pertenece a ningún componente (me refiero a cómo funciona el editor), así que esa declaración siempre se renderiza en el papel. GrapesJS solo puede asociar selectores basados en clases, por ejemplo, '''css .clase1 {...} .cla...
Lee la respuesta completa abajo ↓Pregunta
Probé tanto en npm como en cdn Versión GJS - 0.14.20 (última) OS - Mac Navegador - Chrome
Problema Si el nombre de la clase CSS tiene un padre o hijo como '#parent .child{ color: red }', el usuario no puede restablecer el estilo a origen, pero aún permanece dentro de CodeViewer.
Codepen Demo 1 - Añadiendo CSS del bloque Codepen Demo 2 - Añadiendo CSS dentro de '#gjs<div>'
En la demo1, digamos que el usuario arrastra "Test Block" al lienzo y lo elimina. El estilo CSS seguirá permaneciendo dentro del CodeViewer. Incluso el usuario que limpie el lienzo, no se elimina.
No estoy seguro de que esto sea un error o no. Pero en la mayoría de los casos, solíamos declarar a los selectores CSS, incluidos los padres, no por arruinar los estilos de otras secciones.
Respuestas (3)
Eliminar los códigos CSS que pertenecen a un bloque específico.
De hecho, ese bloque de CSS no pertenece a ningún componente (me refiero a cómo funciona el editor), así que esa declaración siempre se renderiza en el papel. GrapesJS solo puede asociar selectores basados en clases, por ejemplo, '''css .clase1 {...} .clase1.clase2 {...} .clase1.clase2, .clase3 {...}
ni siquiera anidado como '.class1 .class2', en ese caso la regla se importa correctamente pero no pertenece a ningún componente
Esto es porque solo estás limpiando componentes. Puedes usar el comando incorporado 'core:canvas-clear'
@artf Gracias por tu rápida respuesta.
Perdón por mi pregunta poco clara.
Lo que realmente quiero conseguir es
- Eliminar los códigos CSS que pertenecen a un bloque específico. Por ejemplo, cuando borro un bloque en el lienzo, también se eliminan los códigos CSS de ese bloque. No quiero limpiar todo el lienzo.
Probablemente, disparará al destruir.
'Editor. Commands.add ('tlb-delete', e => {'
'// quitar el CSS de este bloque'
})
En este caso, puedo eliminar el código CSS que no tiene padre eliminando los componentes, pero si los códigos CSS tienen un padre o un hijo, no funciona.
Y aquí hay un vídeo que he probado. [! Texto alternativo para tu vídeo](https://youtu.be/176jGzeRrXw)
Según mis componentes, añadí <style>etiquetas de '' dentro del contenido del bloque. Si hay una mejor opción para trabajar con estilos, por favor guíame. Gracias de antemano.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1072
No se puede añadir una nueva regla CSS si un elemento que la está usando no está presente en el html
Hola, estoy usando la última versión y tengo el problema tal y como se describe en el título. Estoy editando html y css por separado. He no...
Issue #1758
No se puede cargar en una cadena CSS con caracteres como '#' con setStyle()
Estás enviando un BUG¿Estás usando la última versión (las versiones anteriores NO están soportadas)?Si no estás seguro, escribe 'grapesjs.v...
Issue #1571
[BUG] Arrastrar y soltar no funciona como debería cuando se usa un dispositivo táctil.
Por favor, mira el vídeo: https://screencast-o-matic.com/watch/cFXQlQYSjWUsar Mac OS última versiónUsa grapesjs - última versión de branch...
Issue #1456
NPM Start no funciona en la versión 0.14.33
Descargué el código fuente por zip y ejecuté 'npm i', pero no puedo ejecutar 'npm start'. Así es como solucioné el problema.Funciona cuando...
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 →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.