Cómo aplicar rasgos a los componentes utilizados para la inicialización de GrapesJ
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)
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
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:
Hola @varadero por favor define tu tipo personalizado como un plugin. ¡Salud!
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2614
[PREGUNTA] Actualización de vista recursiva de un componente personalizado
Hola, He definido un tipo personalizado como: '''javascript editor. DomComponents.addType('customType', { modelo: { Predeterminados: { tipo...
Issue #2103
[PREGUNTA] Problema de arrastre de componentes personalizados
Así es como he creado un componente personalizado: Este es mi bloque personalizado: El caso es que he envolvido la etiqueta de imagen dentr...
Issue #3732
El tipo de componente de comentario no soporta añadir rasgos
Estoy trabajando en un script que añade un rasgo a todos los tipos de componente, pero el tipo de comentario no tiene el objeto prototipo....
Issue #2839
[Pregunta] Añadí un componente llamado plantilla en los bloques, pero cuando intento arrastrar otros componentes dentro de ese componente plantilla, se arrastra, pero tras guardarlo elimina todos los componentes que hay dentro. ¿Cómo evitar esto?
Este es el código del componente de plantilla: '''js exportar default { init(editor) { editor. DomComponents.addType('myTemplate', { isComp...
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.