Establecer href para componente de enlace
@gabrielbitencourt Componente de enlace no tiene la propiedad href, así que añádela directamente a los atributos '''js if (enlace) { this.model.addAttributes({ href: link.url }); } ```
Lee la respuesta completa abajo ↓Pregunta
Hola chicos.
Estoy intentando modificar el componente nativo de enlaces, hasta ahora tengo un modal que se abre en el evento dblclick y el usuario puede elegir entre algunos enlaces predefinidos. El problema es que cuando tengo el enlace elegido no puedo configurarlo como componente.
Funciona bien cuando escribo el enlace en el Administrador de Rasgos.
Aquí está el código que probé:
domc.addType('link', {
Vista: {
eventos: {
dblclick: 'linkModalPicker',
},
async linkModalPicker(ev: MouseEvent) {
ev.preventDefault();
const ref = modal.open(LinkModalComponent, {
ancho: '70%',
Altura: '70%'
});
const link = await ref.afterClosed().pipe(first()).toPromise();
if (enlace) {
this.model.set('href', link.url);
}
}
}
});
Hice algo similar, pero para el componente de imágenes, y funcionó con este código:
domc.addType('image', {
Vista: {
eventos: {
dblclick: 'imágenesSelectorModal',
},
async imagesModalPicker(ev: MouseEvent) {
ev.preventDefault();
const ref = modal.open(ImagesModalComponent, {
ancho: '70%',
Altura: '70%'
});
const img: Item = await ref.afterClosed().pipe(first()).toPromise();
si (IMG) {
this.model.set('src', img.url);
}
}
},
});
Pero por alguna razón no está configurando el href en la etiqueta de ancla.
¡Gracias!Respuestas (3)
@gabrielbitencourt Componente de enlace no tiene la propiedad href, así que añádela directamente a los atributos '''js if (enlace) { this.model.addAttributes({ href: link.url }); }
Gracias por la respuesta @artf
Lo intenté pero tampoco funcionó, pude ver (en el gestor de rasgos) que el href se había configurado usando 'model.addAttributes({ href: link.url })', pero no persistió cuando desseleccioné y seleccioné el componente de nuevo, ni en el resultante 'editor.getHtml()' la etiqueta anchor tenía href vacío.
Creo que esto podría estar relacionado con algunos bugs que he leído aquí, como el #1290
Gracias
pero no persistió cuando desseleccioné y seleccioné el componente de nuevo
Quizá porque sigues leyendo 'this.model.get('href')'... Por cierto, no puedo ayudarte más que esto sin una demo reproducible
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1030
[Pregunta] Eventos de disparo con componentes personalizados
Estoy intentando crear un plugin para Grapesjs con algunos componentes personalizados, y tengo problemas para activar eventos e interactuar...
Issue #3512
Los elementos hijos no se pueden arrastrar, se pueden soltar y se pueden resaltar. también el CSS de todos los elementos hijos que no se insertan en la sección de estilo mientras se desarrolla un componente banner en un plugin
Hola @artf, Estoy intentando desarrollar un plugin sencillo para banners que incluya un encabezado, un subtítulo y un enlace. y cada elemen...
Issue #1875
[PREGUNTA] Cambios de ID al importar HTML o pasar HTML en components prop en config.
Hola, He creado un componente y un bloque que puedo arrastrar y soltar en el lienzo. Mi problema es que algunos estilos dependen del ID. Sé...
Issue #2454
Establecer el radio de la frontera con un valor 'em'.
Hola Estoy intentando usar grapesjs para un proyecto que necesita escalar a la pantalla. Tengo cosas como márgenes y fuentes que funcionan...
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.