Añadir rasgos no es detectado por el gestor de rasgos.
Puedo ver tu ejemplo correctamente y todos los rasgos funcionan correctamente. ¿Eres capaz de crear una demo reproducible?
Lee la respuesta completa abajo ↓Pregunta
Siguiendo un ejemplo de docs.
¿Hay alguna configuración adicional para que se muestren nuevos rasgos para los elementos? El ejemplo que usa la entrada no se ejecuta, mis identificaciones se detectan pero no los atributos adicionales.
'''js Prueba a añadir rasgos
editor. DomComponents.addType('ol', { isComponent: el => el.tagName == 'OL', modelo: { Predeterminados: { Rasgos: [
{ tipo: 'select', // Tipo del rasgo etiqueta: 'Type', // La etiqueta que verás en Configuración nombre: 'type', // El nombre del atributo/propiedad que se debe usar en el componente Opciones: [ { id: '1', nombre: 'Numbers'}, { id: 'a', nombre: 'alfabéticamente inferior'}, { id: 'A', nombre: 'Alfabéticamente superior'}, { id: 'i', nombre: 'Roman lower'}, { id: 'I', nombre: 'Roman upper'}, ] }, { Tipo: 'número', Nombre: 'Start', }], Como por defecto, los rasgos están ligados a los atributos, así que para definir Su valor inicial podemos usar atributos atributos: { tipo: '1', inicio: 1 }, }, }, });
Respuestas (3)
Puedo ver tu ejemplo correctamente y todos los rasgos funcionan correctamente. ¿Eres capaz de crear una demo reproducible?
Este asunto se ha cerrado automáticamente porque no ha recibido respuesta a nuestra solicitud de más información por parte del autor original. Con solo la información que actualmente hay en el asunto, no tenemos suficiente información para actuar. Por favor, contacta con nosotros si tienes o encuentras las respuestas que necesitamos para que podamos investigar más a fondo.
Gracias por informar de esto, @alpha2k-io.
Buena pregunta sobre añadir rasgos no los detecta el gestor de rasgos.. 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 #3524
[PREGUNTA]: Integrar el elemento select2 UI en rasgos
Soy nuevo en uvasJS... Gran herramienta. Tengo algunas preguntas sobre los rasgos. He seguido este tutorial https://grapesjs.com/docs/modul...
Issue #4384
index.d.ts dice que los componentes deben ser Backbone.Collection<Component>, pero la documentación indica que Component[] también es aceptado
Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? CualquieraEnlace de demo reproducible https...
Issue #3688
Cómo personalizar un componente
Leí este documento https://grapesjs.com/docs/modules/Components.html#define-custom-component-type e intenté escribir el siguiente código. Q...
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.