Extender los rasgos de imagen
Hola de nuevo, Aquí está la solución final para crear una imagen de HFeF: '''js editor. DomComponents.addType('imagelink', { modelo: { Predeterminados: { etiquetaNombre: 'div', redimensionable: {keepAutoHeight: true}, Droppable: falso, Rasgos: [ { tipo: 'href', etiqueta: 'Fuente', nombre: 'href' }, { tipo: 'select', e...
Lee la respuesta completa abajo ↓Pregunta
Hola,
Me gustaría ampliar el tipo de imagen con algunas opciones, especialmente con una opción de redirección al hacer clic.
Probé esta solución después de la inicialización del editor (preciso que trabajo en un entorno completo de javascript y no Node.js):
editor. DomComponents.addType('image', {
isComponent: el => el.tagName == 'img',
modelo: {
Predeterminados: {
Rasgos: [
Las cadenas se convierten automáticamente en tipos de texto
'alt',
'título', // Igual que: { tipo: 'texto', nombre: 'nombre' }
{ tipo: 'url', nombre: 'href', marcador de posición:'https://google.com', changeProp: 1 }
],
Como por defecto, los rasgos están ligados a los atributos, así que para definir
Su valor inicial podemos usar atributos
atributos: { tipo: 'título', requerido: false },
},
init() {
Además, el oyente cambia de 'change:attributes:*' a 'change:*'
this.on('change:url', this.handlePlhChange);
},
handlePlhChange() {
console.log('URL actualizada');
},
},
});
Así que, con ese código, vi mi URL introducida pero no puedo activar la actualización.
Mi objetivo es interceptar la actualización de entrada y obtener el valor de entrada para usarlo y poner mi DOM "img" en un DOM "a href"
Cualquier ayuda sería genial :)
Un cordialRespuestas (3)
Hola de nuevo,
Aquí está la solución final para crear una imagen de HFeF:
'''js editor. DomComponents.addType('imagelink', { modelo: { Predeterminados: { etiquetaNombre: 'div', redimensionable: {keepAutoHeight: true}, Droppable: falso, Rasgos: [ { tipo: 'href', etiqueta: 'Fuente', nombre: 'href' }, { tipo: 'select', etiqueta: 'Target', Nombre: 'Objetivo', Opciones: [ { valor: '', nombre: 'Esta ventana' }, { valor: '_blank', nombre: 'Nueva ventana' } ] } ], Componentes: [ { redimensionable: falso, arrastrable: falso, Droppable: falso, seleccionable: false, Hoverable: falso, Tipo: 'Enlace', componentes: [{ tipo: 'imagen', atributos: { src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR U0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoOMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+', estilo:'ancho:100%;' }, redimensionable: falso, arrastrable: falso, Droppable: falso, Hoverable: falso, seleccionable: false, }] } ] }, init() { this.on('change:attributes:href', this.handleHrefChange); this.on('change:atributos:objetivo', this.handleTargetChange); }, handleHrefChange: función ( componente, valor ) { eliminar component.attributes.attributes; component.atributos.componentes.modelos[0].atributos.atributos.href = valor; return false; }, handleTargetChange: función ( componente, valor ) { eliminar component.attributes.attributes; componentes.atributos.modelos[0].atributos.atributos.target = valor; return false; }, }, });
Ahora tengo que encontrar cómo comprobar la integridad de la URL cuando quieres actualizar la variable href
Un cordial
Tengo la misma necesidad en mi proyecto. Intenté crear un bloque, pero no conseguí que la ventana emergente inicial "estallara".
Intenté crear un componente con un plugin, pero hay tanto trabajo que no entiendo cómo pueden conectarse entre sí.
¡Cualquier pista o pista sobre lo que podemos hacer los dos sería genial!
¡Gracias!
Has añadido este oyente 'change:url' pero el nombre del rasgo es 'name: 'href'', así que simplemente cámbialo por 'change:href'
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1748
Cómo evitar que los elementos arrastren dentro del editor
Hola @artf Lo estás haciendo muy bien con grapesjs y es extremadamente útil hacer que nuestra funcionalidad sea más fácil de usar. Gracias...
Issue #3510
Rerenderizar rasgos tras ciertos eventos (por ejemplo, clic)
¿Cómo volver a renderizar los rasgos después de hacer clic en botones? Nota: El rerenderizado no debería ser una modificación del dom. He c...
Issue #3272
id se añade al <img/> hacer doble clic
Versión: 0.16.37 ¿Puedes reproducir el error de la demo? [X] Sí [ ] No ¿Cuál es el comportamiento esperado? Se trata del plugin GrapesJS-mj...
Issue #980
[BUG] Relacionado con la tarea https://github.com/artf/grapesjs/issues/873
Hola, Después de restaurar el editor desde la base de datos, todavía tengo parte del error presente. Parece que dentro del script: function...
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.