Issue #1228💬 RespondidoAbierto el 24 de junio de 2018por ronaldaugReacciones 1

No se puede restablecer el código CSS que tenga padre o hijo.

Respuesta rápidapor artf1

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)

artf30 de junio de 2018

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
artf24 de junio de 2018

Esto es porque solo estás limpiando componentes. Puedes usar el comando incorporado 'core:canvas-clear'

ronaldaug27 de junio de 2018

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

demo de Codepen

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.

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.