Issue #2311💬 RespondidoAbierto el 6 de octubre de 2019por gabrielbitencourtReacciones 0

Establecer href para componente de enlace

Respuesta rápidapor artf

@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.

Fragmento de códigoTEXT
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)

artf6 de octubre de 2019

@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 }); }

gabrielbitencourt6 de octubre de 2019

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

artf6 de octubre de 2019

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.

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.