¿Cómo debería recibir modificaciones de rasgos personalizados en el script?
Tendrás que añadir el rasgo a 'script-props', puedes leer más aquí https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts
Lee la respuesta completa abajo ↓Pregunta
Hola, @artf, este es un marco estupendo, muchas gracias.
Ahora lo estoy usando para crear componentes del framework móvil de BUI y me encontré con un problema: añadí un área de texto personalizada para rasgos, ¿cómo puedo hacer esto? Cuando los datos cambian, se activan en el script de salida.
'''js editor. TraitManager.addType('textarea', { createInput({ rasgo, Componente }) { Aquí podemos decidir usar propiedades del rasgo const el=document.createElement('div'); el.innerHTML = ' <textarea clase="buiv-textarea" nombre="${options[0].name}" filas="${opciones[0].filas}">${opciones[0].valor}</textarea> `; devuelve El; }, onEvent({ elInput, componente, Evento }) { El cambio de datos llegará a esta callback, puedes operar el componente, pero ¿cómo podemos activar los parámetros recibidos en el script? }, onUpdate({ elInput, componente, Rasgo }) { }, });
usar trait textarea editor. DomComponents.addType("slide", { model: defaultModel.extend({ Predeterminados: { ... defaultModel.prototype.defaults, Nombre: "Slide", contenido: '<div class="bui-slide bui-slide-skin01"></div>', datos: '[{imagen:""}]', rasgos: [{ Tipo: 'área de texto', Nombre: 'Datas', etiqueta: "datos", cambioProp: 1, }], script() {
sea parentId=this.id; la primera vez es [{imagen:""}], quiero escuchar el disparador de 'datos' para cambiar aquí. console.log('{[ datos ]}')
}, }, } }), view: defaultView.extend({ init() { const props=['loop', 'fullscreen', 'height', 'direction', 'visibleNum', 'scrollNum', 'datas', 'autoplay'];
const reactTo = props.map(prop => 'change:${prop}').join(' ');
this.listenTo(this.model, reactTo, this.render);
} }), });
Respuestas (4)
Tendrás que añadir el rasgo a 'script-props', puedes leer más aquí https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts
Gracias @Ju99ernaut, si son algunas funciones integradas, al modificar el script puede recibir el valor del parámetro, actualmente estoy experimentando problemas: la característica personalizada 'textarea' puede activar cambios como dom, pero el script exportado no puede recibir el valor de este parámetro, incluso si los script-props están activados: "datas".
Puedes intentar forzar la actualización del script:
'''js editor. DomComponents.addType('slide', { modelo: { // ... init() { this.on('change:datas', () => this.trigger('change:script')); }, }, // ... });
Gracias por informar de esto, @imouou.
Buena pregunta sobre ¿Cómo debería recibir modificaciones de rasgos personalizados en el script?. El enfoque recomendado con Canvas es usar 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 #6409
No se puede arrastrar para mover componentes en móvil
Versión GrapesJS [x] Confirmo que uso la última versión de GrapesJS ¿Qué navegador usas? Chrome v133 Enlace de demo reproducible https://js...
Issue #3655
Los cambios en el nombre del botón del formulario no se capturan en el código HTML generado
Versión: Versión 0.17.19(grapesjs) Versión 0.1.11(grapesjs-preset-webpage) ¿Puedes reproducir el error de la demo?[ ] No ¿Cuál es el compor...
Issue #3166
Problema con copiar y pegar un nodo
*Versión:0.16.27 ¿Puedes reproducir el error de la demo? [ ] Sí [ ] No ¿Cuál es el comportamiento esperado? En el panel y lienzo derechos,...
Issue #3140
Componente interactivo en el lienzo
Estoy creando un plugin para crear cuestionarios usando grapesjs. Me preguntaba si podríamos añadir un componente que sea interactivo y que...
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.