Personalizar estilos de bloques - grapesjs Angular
Quizá con estos eventos puedas hacerlo: https://grapesjs.com/docs/api/editor.html#blocks o https://grapesjs.com/docs/api/editor.html#canvas
Lee la respuesta completa abajo ↓Pregunta
Soy nuevo en el mundo de las uvas, estoy intentando hacer los bloques en un estilo diferente al arrastrar por ejemplo, los bloques de imagen 1 - cuando no se arrastra o flota toma el estilo A. 2- cuando el estacionamiento toma el estilo B . 3- Cuando se arrastra, toma el estilo C (cuando está sobre el lienzo).
¿Alguien puede ayudarme con este problema?
Gracias ! DASHBORAD – 12 ! DASHBORAD – 11 ! DASHBORAD – 9
Respuestas (4)
Quizá con estos eventos puedas hacerlo: https://grapesjs.com/docs/api/editor.html#blocks o https://grapesjs.com/docs/api/editor.html#canvas
En tal caso, probablemente una interfaz de gestor de bloques completamente personalizada sea la única opción (por ejemplo, renderizada por tu propio componente BlockManager en Angular). Ya debería ser posible, pero preferiría tomarme mi tiempo y actualizar la documentación de Blocks con todos los pasos y ejemplos necesarios para construir la interfaz de BlockManager desde cero.
En tal caso, probablemente una interfaz de gestor de bloques completamente personalizada sea la única opción (por ejemplo, renderizada por tu propio componente BlockManager en Angular). Ya debería ser posible, pero preferiría tomarme mi tiempo y actualizar la documentación de Blocks con todos los pasos y ejemplos necesarios para construir la interfaz de BlockManager desde cero.
Gracias por tu respuesta, tengo otras preguntas:
1- Estoy intentando añadir div con algo de estilo dentro del lienzo, pero no será editable o arrastrado solo en modo de lectura, ¿es posible?
2- ¿puedo cambiar la posición del RTE como acción del panel en una posición fija?
Muchas gracias, estaría encantado de que respondieras a mis preguntas
Gracias por informar de esto, @hadeel94.
Gracias por compartir tu informe sobre Personalizar estilos de bloques - grapesjs Angular. 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 #3478
Usando GrapeJS en nextjs
Algunos de los css no funcionaban correctamente, por ejemplo, el .gjs-cv-canvas no funcionaba. Esta es la captura de pantalla de mi página...
Issue #5746
El desplazamiento de ColorPicker incorrecto cuando los paneles están fuera del contenedor del editor
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome v122 Enlace de demo reproducible h...
Issue #3345
La sección de viñetas y botones de cómo empezar no funciona con Vue.js
Estoy intentando que Grapejs funcione con Vue.js y no tengo suerte, estoy siguiendo el proceso de inicio pero no consigo que funcione bien....
Issue #4082
Elimina algunos estilos iniciales del lienzo del marco
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome v96 Enlace de demo reproducible Si...
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.