Pregunta: ¿Cómo puedo crear una imagen existente como enlace?
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)
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
}
})
}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
});@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.
Issue #2595
[Pregunta] Problemas para arrastrar HTML externo con draggable="true"
Quiero hacer que un elemento html externo se pueda arrastrar a GrapesJS, como cuando puedes arrastrar un bloque y que añada algo. Tengo una...
Issue #2542
[Pregunta] Componente similar a una imagen con gestor de activos propio
¡Hola a todos! Tengo una pregunta sobre mi problema, que quiero resolver durante aproximadamente un mes. La pregunta es: ¿Puedo crear un co...
Issue #2728
[PREGUNTA] ¿Cómo puedo configurar la imagen de fondo de un componente programáticamente?
Hola, Quiero crear una opción para cambiar en segundo plano de un componente haciendo doble clic en él. Podía abrir el modal al hacer doble...
Issue #1780
Cómo cambiar el desplegable extra para el rasgo de cambio de enlace
Hola @artf, Quiero dar una funcionalidad más al usuario, como que el usuario pueda cambiar cualquier enlace con el desplegable de enlaces p...
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.