Issue #2143💬 RespondidoAbierto el 16 de julio de 2019por chauhankiranReacciones 0

Pregunta: ¿Cómo puedo crear una imagen existente como enlace?

Respuesta rápidapor miky9585

He resuelto esto de esta manera: Sobre el guion de backend: var originalImage = editor. DomComponents.getType('image'); editor. DomComponents.addType('image', { model: originalImage.model.extend({ por defecto: Object.assign({}, originalImage.model.prototype.defaults, { rasgos:[{ Tipo: "texto", etiqueta: "ID", Nombre:...

Lee la respuesta completa abajo ↓

Pregunta

Tengo una plantilla existente que actualmente muestra la imagen en el centro de la página. Ahora, quiero que se pueda enlazar o hacer clic para que si el usuario hace clic en la imagen se abra con el 'href'. ¿Cómo se puede hacer eso? Actualmente, tenemos un bloque de enlace y dentro de él podemos colocar una imagen. Pero estoy pidiendo lo contrario: imagen existente para enlazar.

Respuestas (3)

miky958524 de julio de 2019
Fragmento de códigoTEXT
He resuelto esto de esta manera:
Sobre el guion de backend:

var originalImage = editor. DomComponents.getType('image');
	editor. DomComponents.addType('image', {
		model: originalImage.model.extend({
			por defecto: Object.assign({},
	            originalImage.model.prototype.defaults, { 
	                rasgos:[{
		                	Tipo: "texto",
		                	etiqueta: "ID",
		                	Nombre: "ID"
	                	},
	                	{
		                	Tipo: "texto",
		                	etiqueta: "URL",
		                	Nombre: "data-img-url"	
	                	},
	                	{
		                	tipo: 'select',
				            etiqueta: 'Target',
				            Nombre: 'Data-IMG-Target',
				            valor: "_top",
				            Opciones: [
				              {valor: '_top', nombre: 'Misma página'},
				              {valor: '_blank', nombre: 'Nueva página'}, 
				            ]	
	                	}
	                ]
	            }), 
	        
},
		{
			isComponent: function(el) {
				if("IMG"==el.tagName) return {
                    Tipo: "Imagen"
                }

},
		}),
		ver: originalImage.view
	});

Cuando se muestra la página (la he guardado en la base de datos)

if( $('[data-img-url]').length > 0 ){  
		$.each($('[data-img-url]'), function(i,e){ 
			if( typeof $(e).data('img-url') != 'undefined' & & $(e).data('img-url').length > 0){
				var href = $(e).data('img-url'), target = $(e).data('img-target') || '_top';
				var a = $('<a/>').attr('href', href).attr('target', target);
				$(e).envoltorio(a);
				$(e).removeAttr('data-img-url').removeAttr('data-img-target'); MANTÉN EL CÓDIGO LIMPIO
			} 
		})
	}
miky958524 de julio de 2019
Fragmento de códigoTEXT
Backend SEO amigable (añadido Alt attr)

var originalImage = editor. DomComponents.getType('image');
	editor. DomComponents.addType('image', {
		model: originalImage.model.extend({
			por defecto: Object.assign({},
	            originalImage.model.prototype.defaults, { 
	                rasgos:[{
		                	Tipo: "texto",
		                	etiqueta: "ID",
		                	Nombre: "ID"
	                	},
	                	{
		                	Tipo: "texto",
		                	etiqueta: "URL",
		                	Nombre: "data-img-url"	
	                	},
	                	{
		                	Tipo: "texto",
		                	etiqueta: "Texto alternativo",
		                	Nombre: "Alt"	
	                	},
	                	{
		                	tipo: 'select',
				            etiqueta: 'Target',
				            Nombre: 'Data-IMG-Target',
				            valor: "_top",
				            Opciones: [
				              {valor: '_top', nombre: 'Esta ventana'},
				              {valor: '_blank', nombre: 'Nueva ventana'}, 
				            ]	
	                	}
	                ]
	            }), 
	        
},
		{
			isComponent: function(el) {
				if("IMG"==el.tagName) return {
                    Tipo: "Imagen"
                }

},
		}),
		ver: originalImage.view
	});
artf31 de julio de 2019

@chauhankiran el paso correcto sería crear un componente personalizado, una especie de 'imagen de enlace', que sustituiría al de 'imagen'. La raíz de este componente será el <a>elemento '' y la interna será la imagen.

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.