Componentes personalizados basados en el bloque Link con un href predeterminado
@csb346 puedes definir un nuevo tipo de componente personalizado: y luego úsalo dentro de un bloque: Solo recuerda que debes definir tu tipo de componente personalizado dentro de un plugin ¡Salud!
Lee la respuesta completa abajo ↓Pregunta
¡Hola! Tengo una integración con GrapesJS en un proyecto de Laravel con componentes personalizados directamente en la página (cada bloque debería ser un enlace de bloque a un contenido). Hasta ahora he replicado el componente de enlace de bloque así
@foreach($contents como $content)
editor. BlockManager.add('content_{{ $content->id }}', {
categoría: 'Contenidos',
etiqueta: '<b>{{ $content->título }}</b>',
Atributos: { Clase:'FA FA-GRADUACIÓN-Cap' },
Contenido: {
Tipo: 'Enlace',
editable: false,
Droppable: Cierto,
estilo:{
pantalla: 'bloque en línea',
relleno: '5px',
'altura mínima': '50px',
'min-width': '50px'
},
Contenido: '{{ $content->título }}',
},
});
@endforeach
Hasta ahora, todo bien. Pero necesito que cada uno de estos componentes tenga su propio href definido por defecto. No importa si es editable o no. Algo así:
'href: 'http://url.com/content/{{ $content->id }}','
No encuentro la solución. ¿Alguna idea?
Gracias
Respuestas (1)
@csb346 puedes definir un nuevo tipo de componente personalizado:
editor. DomComponents.addType('content-link', {
extiende: 'enlace',
modelo: {
Predeterminados: {
editable: false,
Droppable: Cierto,
estilo: {
pantalla: 'bloque en línea',
relleno: '5px',
'altura mínima': '50px',
'min-width': '50px'
},
atributos:{href:'http://google.com'}
Contenido: '{{ $content->título }}',
}
}
});
y luego úsalo dentro de un bloque:
editor. BlockManager.add('content-link', {
etiqueta:'Enlace de contenido',
categoría:'Contenido',
Atributos: { Clase:'FA FA-GRADUACIÓN-Cap' },
contenido:{
tipo:'enlace-contenido'
}
})
Solo recuerda que debes definir tu tipo de componente personalizado dentro de un plugin ¡Salud!
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3309
Los Nodos de Texto interfieren al cambiar el contenido en un elemento
Versión: 0.16.44 Hola @artf Tengo un bloque personalizado con un componente de botón personalizado, cuyo contenido es similar al de este. `...
Issue #1912
[PREGUNTA] Componentes personalizados hijos por defecto
Hola, Estoy intentando entender cómo puedo lograr lo siguiente.Crear un componente con un contenido predeterminado como hijos.Crea un bloqu...
Issue #2388
[Pregunta] - Cómo importar estilos de <link> para renderizarse al arrastrar un bloque a lienzo
Mi situación: Estoy importando poco a poco algunos de mis componentes personalizados de interfaz de usuario en 'ReactJS' a 'GrapesJS'. Ahor...
Issue #2154
Integración de componentes personalizados
¡Hola! Quiero integrar un componente personalizado con GrapesJS, usando Angular CLI 7, pero no se renderiza. Mi componente está construido...
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.