Issue #2696✓ ResueltoAbierto el 2 de abril de 2020por kuhelbeherReacciones 10

¿Cómo puedo crear bloque con imagen de fondo con un comportamiento similar a una "imagen" incorporada?

Respuesta rápidapor kuhelbeher6

@noogen Gracias por el consejo, lo implementé así: '''javascript const domc = editor. DomComponents domc.addType('image-block', { extender: 'por defecto', modelo: { valores predeterminados: función () { return { nombre: 'Imagen de fondo', Tipo: 'Bloque de imagen', etiquetaNombre: 'div', nulo: falso, Droppable: Cierto...

Lee la respuesta completa abajo ↓

Pregunta

Hola, estoy intentando crear un bloque con imagen de fondo (similar a Grapedrop Image Box). He añadido un componente nuevo así: '''javascript domc.addType('image-block', { extiende: 'imagen', modelo: { predeterminados: función() { return { nombre: 'Imagen de fondo', Tipo: 'Bloque de imagen', etiquetaNombre: 'div', nulo: falso, Droppable: Cierto, Redimensionable: Verdadero } } }, Vista: { etiquetaNombre: 'div', updateSrc: function() { const { model, em } = this; const srcResult = model.getSrcResult(); const style = model.getStyle(); const isDefaultSrc = model.isDefaultSrc(); const url = "url('...

Respuestas (2)

👍 Muy útilkuhelbeher8 de abril de 2020

@noogen Gracias por el consejo, lo implementé así: '''javascript const domc = editor. DomComponents domc.addType('image-block', { extender: 'por defecto', modelo: { valores predeterminados: función () { return { nombre: 'Imagen de fondo', Tipo: 'Bloque de imagen', etiquetaNombre: 'div', nulo: falso...

noogen5 de abril de 2020

@kuhelbeher porque, en última instancia, sigue siendo una imagen. No es para usar/anular como quieres porque en el código del back-end (mira tanto el modelo de componentes de imagen como la vista) https://github.com/artf/grapesjs/blob/dev/src/domcomponents/view/ComponentImageView.js#L55 y https://g...

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.