Cómo guardar los rasgos añadidos dinámicamente
lo conseguí teniendo un atributo de conteo en el componente y luego sumando los tiempos de recuento de rasgos en la entrada del contenedor. Esta es la forma correcta. Los rasgos se saltan intencionadamente del JSON, de lo contrario pondrías en pausa la definición de tu componente en el almacenamiento (por ejemplo, el...
Lee la respuesta completa abajo ↓Pregunta
Hola @artf, tengo un componente personalizado que tiene un rasgo de botón. Cuando se pulsa el botón, añado dinámicamente un rasgo personalizado usando 'comp.addTrait()'. Cuando cargo la plantilla guardada, quiero que el contenedor muestre también los rasgos añadidos dinámicamente. (Estoy cargando la plantilla usando componentes, pero los rasgos añadidos dinámicamente no se muestran). ¿Qué podría estar haciendo mal?
Respuestas (4)
lo conseguí teniendo un atributo de conteo en el componente y luego sumando los tiempos de recuento de rasgos en la entrada del contenedor.
Esta es la forma correcta.
Los rasgos se saltan intencionadamente del JSON, de lo contrario pondrías en pausa la definición de tu componente en el almacenamiento (por ejemplo, el día que actualices, tus usuarios seguirán viendo los antiguos).
@artf, gracias por responder. Eso fue una información realmente valiosa.
Lo conseguí teniendo un atributo de recuento en el componente y luego sumando los tiempos de recuento de rasgos en la entrada del contenedor.
Gracias por informar de esto, @theSC0RP.
Buena pregunta sobre Cómo guardar los rasgos añadidos dinámicamente. El enfoque recomendado con Componentes es utilizar la API orientada a eventos.
Empieza aquí:
- Consulta la documentación de GrapesJS de tu módulo específico
- Busca el método del oyente de eventos 'on()'
- La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes
Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));
Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));
**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3541
[PREGUNTA] ¿Cuál es la forma idiomática de añadir y eliminar clases de los componentes?
Hola 👋 ¡Me encanta el editor! Estamos usando rasgos para modificar las clases que tiene un componente, pero eso resulta un poco forzado po...
Issue #3185
[PREGUNTA] ¿Cómo obtener el rasgo del modelo de un componente?
Hola, He añadido un nuevo tipo de "array" al TraitManager. Así que puedo añadir varios subrasgos. En un punto tengo que comprobar los rasgo...
Issue #3270
¿Cómo exportar código JS desde componentes de Angular?
Hola, estoy usando grapesjs en mi app de Angular Tengo un componente personalizado de Angular (que básicamente es HTML personalizado creado...
Issue #3258
Evitar/desactivar bloques personalizados dentro de otros bloques personalizados
Hola, Tengo un componente personalizado, llamémoslo Section Block. Quiero evitar que el usuario deje caer bloques de sección dentro de otro...
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
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.