Issue #2456✓ ResueltoAbierto el 12 de diciembre de 2019por varaderoReacciones 2

Cómo aplicar rasgos a los componentes utilizados para la inicialización de GrapesJ

Respuesta rápidapor artf2

actualmente hay un problema para almacenar tipos personalizados a menos que estén definidos dentro de un plugin. No hay problema 😬, solo necesitas cargar tipos personalizados antes del contenido y usar plugins es la única formano puedo añadir todos los elementos posibles como plugins https://jsfiddle.net/artur_arseni...

Lee la respuesta completa abajo ↓

Pregunta

Estoy usando

        this.gjs.DomComponents.addType('some-name', {
            isComponent: (el: HTMLElement) => {
                sea isCmp = false;
                if (el.attributes) {
                    isCmp = el.attributes['alguno-atributo'] !== indefinido;
                }
                return isCmp;
            },
            modelo: {
                Predeterminados: {
                    Rasgos: [
                        {
                            tipo: 'select', // Tipo del rasgo
                            etiqueta: 'Etiqueta de rasgo', // La etiqueta que verás en Configuración
                            Nombre: 'alguno-atributo', // El nombre del atributo/propiedad a usar en el componente
                            opciones: myItems.map(x => ({ id: x.id, nombre: x.name }))
                        }
                    ],
                    Como por defecto, los rasgos están ligados a los atributos, así que para definir
                    Su valor inicial podemos usar atributos
                    atributos: { 'alguno-atributo': '' },
                },
            },
        });

Esto funciona, pero solo para bloques que se añaden o arrastran y soltan manualmente al editor después de inicializarse. Si aportamos 'components' cuando llamamos 'grapesjs.init({..., components: [..]})', los componentes definidos en 'componentes' no tienen los rasgos. ¿Cómo podemos aplicar rasgos también a componentes cargados inicialmente, no solo a estos añadidos manualmente después?

Respuestas (3)

👍 Muy útilartf14 de diciembre de 2019

actualmente hay un problema para almacenar tipos personalizados a menos que estén definidos dentro de un plugin.

No hay problema 😬, solo necesitas cargar tipos personalizados antes del contenido y usar plugins es la única forma

no puedo añadir todos los elementos posibles como plugins

https://jsfiddle.net/artur_arseniev/9tg0a36c/

varadero12 de diciembre de 2019

Así es como puede reproducirse:

  • Ve a https://jsfiddle.net/nwsy6mv1/3/
  • Bloques abiertos y colocación del bloque de "1 columna"
  • Haz clic dentro de la columna y ve a "Configuración"
  • Verás el desplegable de rasgo con la etiqueta "Etiqueta de rasgo"
  • En este momento, los componentes grapesjs se guardan en el almacenamiento local porque está configurado como 'storageManager: { type: 'local' }'
  • Actualizar el navegador para que grapesjs cargue componentes desde el almacenamiento local
  • Haz clic en la columna y ve a "Configuración"

Qué ocurre: El panel de ajustes ahora contiene solo los rasgos predeterminados, pero no el especificado en el código. Ahora, si añades manualmente otro bloque de "1 columna" y haces clic en su configuración, verás el rasgo. Si sigues refrescando, cada rasgo especificado no estará disponible para los componentes "cargados inicialmente"; solo estará disponible para estos que arrastran y soltan manualmente en el editor grapesjs.

Un gif animado:

! uvas-rasgos-bicho

pouyamiralayi12 de diciembre de 2019

Hola @varadero por favor define tu tipo personalizado como un plugin. ¡Salud!

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.