El estilo seleccionado por gjs es Hardcoded
Hola @anlumo tienes razón, desafortunadamente los estilos de estado de los componentes se renderizan dentro de iframes. He intentado sacarlos fuera introduciendo esta opción, pero aún no gestiona varias selecciones. Así que, por ahora, la única forma de manejarlos correctamente es usando esta opción: '''js grapesjs.in...
Lee la respuesta completa abajo ↓Pregunta
Esta definición:
siempre se añade al marco. Contiene la definición de color de los elementos seleccionados (ese contorno azul). Este color no se puede cambiar, porque aquí hay un '!importante'. Como esto se añade al cuerpo, añadir una hoja de estilos en el encabezado no lo anula, incluso cuando uso '!important' ahí también.
En mi caso de uso, el problema crítico es que quiero poder imprimir el documento creado en grapesjs, pero las impresiones no deberían contener el esquema de selección. Puedo escribir '@media print { .gjs-selected { outline: none !important; } }', pero eso no servirá de nada porque está anulado por esta definición codificada de CSS.
Además, poder cambiar el color para que encaje con la identidad corporativa de la página sería bueno.
Respuestas (4)
Hola @anlumo tienes razón, desafortunadamente los estilos de estado de los componentes se renderizan dentro de iframes. He intentado sacarlos fuera introduciendo esta opción, pero aún no gestiona varias selecciones. Así que, por ahora, la única forma de manejarlos correctamente es usando esta opción: '''js grapesjs.init({ // ... canvasCss: ' .gjs-selected { Esquema: 3px ¡Rojo sólido! importante; } `, })
Hola @mingxin-yang, creo que tienes que seguir la misma regla que @artf dicho. Pero usando las clases correspondientes
'''js grapesjs.init({ // ... canvasCss: ' .gjs-tools .gjs-badge { /* para la etiqueta / Color de fondo: Rojo; } .gjs-toolbar { / para la barra de herramientas */ Color de fondo: Rojo; } `, })
Publicado Plugin gratuito para colores de conjunto
Fronteras: https://gjs.market/products/borders-color-around-selected-component
Gracias por informar de esto, @anlumo.
Gracias por compartir tu informe sobre el estilo de gjs, seleccionado por Hardcoded. Para ayudar al equipo a investigar y priorizar esto:
Por favor, proporciona:
- Un ejemplo mínimo reproducible (CodeSandbox/JSFiddle)
- Tu GrapesJS número de versión
- Información sobre navegador y sistema operativo
- Cualquier mensaje de error de la consola del navegador
- Pasos para reproducir el problema
Lo que más ayuda:
- Ejemplo de código mínimo (no tu proyecto completo)
- Grabación de pantalla o captura de pantalla que muestra el problema
- Comportamiento esperado frente a comportamiento real claramente indicado
- Configuración GrapesJS que estás usando
Con estos detalles, los mantenedores pueden identificar y priorizar una solución mucho más rápido. El equipo de GrapesJS responde muy bien a los problemas bien documentados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #4208
Error de estado de clic de estilo en todos los elementos
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Brave Last, probado en Chrome Last y Safa...
Issue #6663
Los símbolos se rompen al cargar páginas progresivamente (las instancias pierden __symbol enlace)
Aquí tienes un vídeo que muestra el error: https://github.com/user-attachments/assets/0fdc76ed-cee5-4481-98b1-cbbf52572b31 Versión GrapesJS...
Issue #4529
Cuando redimensionamos una imagen con la clase 'xyz', todos los elementos de la página con la misma clase también se redimensionan porque el editor añade CSS a esas clases.
Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Versión 104.0.5112.101 (Versión oficial) (a...
Issue #3252
¿Quita getHtml() la propiedad de estilo en línea?
Estaba trasteando con formas de cambiar el estilo de los elementos dentro del lienzo y me di cuenta de que al usar el rasgo color-selecter...
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.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.