Problem #2696✓ GelöstApr 2, 2020 geöffnetvon kuhelbeher10-Reaktionen

Wie kann ich einen Block mit Hintergrundbild erstellen, das ein Verhalten wie ein eingebautes "Bild" hat?

Kurze Antwortvon kuhelbeher6

@noogen Danke für den Tipp, ich habe es so umgesetzt: '''javascript const domc = Herausgeber. DomComponents domc.addType('image-block', { Erweitern: 'Standard', model: { defaults: function () { Rückkehr { Name: 'Hintergrundbild', Typ: 'Bildblock', TagName: 'div', leer: falsch, Droppable: True } } }, Ansicht: { init ()...

Lesen Sie die vollständige Antwort unten ↓

Frage

Hallo, ich versuche, einen Block mit Hintergrundbild zu erstellen (ähnlich wie die Grapedrop Image Box). Ich habe eine neue Komponente wie diese hinzugefügt: '''javascript domc.addType('image-block', { Erweitern: 'Bild', model: { defaults: function() { Rückkehr { Name: 'Hintergrundbild', Typ: 'Bildblock', TagName: 'div', leer: falsch, Droppable: True, Größenvergrößerbar: Wahr } } }, Ansicht: { TagName: 'div', updateSrc: function() { const { model, em } = dies; const srcResult = model.getSrcResult(); const style = model.getStyle(); const isDefaultSrc = model.isDefaultSrc(); const URL = "url('"...

Antworten (2)

👍 Am hilfreichstenkuhelbeherApr 8, 2020

@noogen Danke für den Tipp, ich habe es so umgesetzt: '''javascript const domc = Herausgeber. DomComponents domc.addType('image-block', { Erweitern: 'Standard', model: { defaults: function () { Rückkehr { Name: 'Hintergrundbild', Typ: 'Bildblock', TagName: 'div', leer: falsch, Droppable: True } } }...

NoogenApr 5, 2020

@kuhelbeher weil es letztlich immer noch ein Bild ist. Es ist nicht für die Nutzung oder Überschreibung gedacht, wie du es möchtest, denn im Backend-Code (schau dir sowohl das Bild-Komponentenmodell als auch die Ansicht an) sind https://github.com/artf/grapesjs/blob/dev/src/domcomponents/view/Compo...

Verwandte Fragen und Antworten

Führe die Forschung mit ähnlichen Themendiskussionen fort.

Kostenpflichtige Plugins, die diesem Problem entsprechen

Kuratiert nach Themen-Schlüsselwörtern und Label-Relevanz, damit Sie schneller liefern.

Alle Plugins anzeigen

Lade: Empfehlungen für kostenpflichtige Plugins...

Kostenlose Option

Überprüfen Sie die Open-Source-GrapesJS-Plugins auf GitHub Oder suchen Sie schnell in unserem kostenlosen Katalog.

Durchstöbere kostenlose Plugins →
Premium-Option

Premium-Plugins werden mit Support, regelmäßigen Updates und produktionsreifen Funktionen geliefert – das spart Tage an Integrationsarbeit.

Durchsuchen Sie Premium-Plugins →

Durchsuchen Sie Plugin-Kategorien

Springe direkt zu den Plugin-Kategorieseiten im Marktplatz.