Ich spiele mit den inneren Komponenten von Grapes, weil ich in Zukunft etwas beitragen möchte. Mein größtes Interesse gilt dem Vorteil generischer HTML-Seiten, unabhängig vom Stil/Aufbau von CSS und HTML (einschließlich Doctype, Body Support usw.). Ich erwartete, dass die 'Layers'-Hierarchie den DOM-Baum darstellt. Da...
Maxtacco
Übrigens sieht es so aus, als würde der Layer Manager die https://github.com/artf/grapesjs/blob/49100b2f63411fb08d438d21a5f7ff9131773a75/src/dom_components/model/Component.js#L35-Eigenschaft von Component beim Rendern eines Baumknotens in...
Maxtacco
GrapesJS basiert auf Komponenten. Ich denke, es zeigt in diesem Fall Komponentennamen statt Tag-Namen an. Ich denke, das Hinzufügen von Tag-Namen und/oder das Anpassen von Layer-Baum-Rendering wäre eine schöne Verbesserung.
Maxtacco
Tatsächlich kann die GrapesJS-Komponente aus mehreren DOM-Elementen bestehen, daher macht es in diesem Fall möglicherweise keinen Sinn, Tag-Namen anzuzeigen, weil man eine Komponente und nicht einzelne Elemente darin gestaltet.
Gibt es eine Option, ein Bestätigungsfeld vor dem Löschen eines Blocks zu aktivieren?
artf
Nein, aber du kannst den Standardbefehl 'tlb-delete' erweitern '''js Redakteur. Commands.add('tlb-delete', ed => { wenn (bestätigen('Sicher?')) { const selected = ed.getSelected(); selected && selected.destroy(); } }); ```
Iceweex
@artf funktioniert das nur für den Symbolleisten-Button, aber wenn ich auf meiner Tastatur auf "Löschen" drücke, funktioniert das nicht. Wie kann ich dieses Ereignis überschreiben?
artf
Hallo @Iceweex, leider geht das im Moment nicht. Für die nächste Version zentralisiere ich diese Befehle und aktualisiere auch den Ereignislebenszyklus, sodass du die Aufgabe auf diese Weise erfüllen kannst '''js const commandName = 'core:...
Das Aufrufen von 'init()' auf Grapes nach der Änderung des HTMLs schlägt fehl. So etwas passiert bei One-Page-Apps. Ich denke, eine 'Destory()'-Funktion ist nötig, um Grapes elegant zurückzusetzen.https://jsfiddle.net/wdtrg1je/ (sehr einfache Simulation einer einseitigen App)Klicke auf "Trauben hinzufügen" (lädt Traub...
NoJacko
Sieht so aus, als wäre ich nicht der Einzige, der das will 😉. Single-Page-Apps sind der Bereich, an dem das Gewicht ist (das Problem, das ich anspreche, aber auch um Speicher freizumachen). Ich werde versuchen, eine persönliche Bestleistu...
artf
Wie bereits erwähnt hier, sehe ich derzeit keinen Sinn darin, eine solche Funktion zu starten (eine gute Destroy-Methode zu schaffen), würde mich aber sehr über PR-:)
Lock[Bot]
Dieser Thread wurde automatisch gesperrt, da es nach seiner Schließung keine jüngste Aktivität gegeben hat. Bitte eröffne eine neue Ausgabe wegen verwandter Bugs.
Hallo, Ich habe mir das dom_components angeschaut, aber ich kann einfach nicht herausfinden, wie man den Styling-Aspekt manuell überschreibt. Ich brauche eine Möglichkeit, dass die Komponente alle neuen Stile im Style-Tag speichern kann, anstatt in der eigentlichen CSS-Klasse. (Versuch mal, eine Komponente zu verschie...
Ryandeba
Hallo @Owchzzz, Es scheint im Kern von GrapesJS verankert zu sein, dass Komponenten kein Style-Tag haben – siehe dieses Beispiel, wo es explizit entfernt wurde. Ich bin mir nicht sicher, ob eine Änderung dieses Verhaltens deinen Anwendungs...
Amir2828
Hast du es geschafft, eine vollständige Lösung zu finden, die die Style-Tags unverändert lässt?
Amenk
Die Lösung von @ryandeba scheint nur die Verwendung von Inline-Style-Attributen wie '<div style="...">' zu beeinflussen. (Aber bei mir wurden diese auch nicht herausgefiltert, ohne diesen Prototyp zu überschreiben. Wir haben das Problem, d...
Wenn doppelte Anführungszeichen zu einem Attribut hinzugefügt werden, bricht das HTML.https://jsfiddle.net/szLp8h4n/Ziehe den Linkblock herein.Klicken Sie auf den Link im EditorGehe zum Panel "Komponenteneinstellungen"Geben Sie 'Dies ist ein "Beispiel"' ins Feld 'Titel' ein.Klicke auf das Code-Symbol anzeigen.Ungültig...
artf
Danke fürs Aufmerken, James PRs sind willkommen
artf
@nojacko ich baue keine Dateien vor der Veröffentlichung, also wenn du Dateien aus 'dist' verwendest, benutzt du immer noch die alte Version
artf
Behoben durch https://github.com/artf/grapesjs/pull/939
Benutze sie nur nicht zum Laden deiner Vorlagendaten '''js editor.setStyle( arrdata['style'] ), editor.setComponents( arrdata['components']); ``` Ist alles, was du brauchst
Ich habe eine große Anzahl statischer Websites, einige wurden schon vor einiger Zeit entwickelt (mit Bootstrap usw.) und einige, die in jüngerer Zeit entwickelt wurden (mit CSS Grid usw.). Einige verwenden Inline-Stile, manche klassenbasiertes Styling, manche Stile basieren auf Komponentenhierarchie (zum Beispiel '#id...
Tommedema
@artf danke, verstehe. Ich finde es sogar gut, dass du dich auf den CSS-Parser des Browsers verlässt, denn ich bemerke bereits Performance-Probleme bei großen Vorlagen. Wenn du dich auch auf etwas wie Postcss verlässt, befürchte ich, dass...
artf
Ich glaube, dass Grapes ausschließlich mit BEM-ähnlichem CSS-Styling arbeitet. Das heißt, jede Komponente hat ihre eigene Klasse. Stimmt das? Ist der "Selektor/Klassen-Viewer", der nur erlaubt, Stile von klassenbasierten Selektoren wie '.c...
Tommedema
@artf Danke für die Antwort! Ich glaube, ich muss meinen Anwendungsfall noch genauer erklären. Es ist nicht immer realistisch zu erwarten, dass jemand, der eine Vorlage importiert, definiert, welche CSS aus externen Bibliotheken stammt. De...
Hallo zusammen. Das Problem ist: Ereignisse sind einfach kein Feuer, nachdem sie sich auf die Leinwand gezogen haben. editor.on('canvas:dragover') editor.on('canvas:drop') editor.on('canvas:dragenter') editor.on('canvas:dragend') Der Code ist einfach der Democode aus dem Repo, mit 4 Events. Hier ist der Code:var edito...
konstantin55000
Code ist Syntax. Gültig. Hier ist jsfiddle mit Code https://jsfiddle.net/s9b2k7vp/ Hier ist die Demo: https://www.screencast.com/t/pWcpkM7QO
konstantin55000
Update. Events werden ausgelöst, aber direkt danach fallen Block in die Leinwand. Ich bin mir nicht sicher, ob das ein Problem ist, denn Wie sieht es mit Event canvas:dragend und canvas:dragover aus? Wenn der Block nicht in die Leinwand fä...
konstantin55000
Viel Entschuldigung. Das Ereignis wurde nicht wegen der vorherigen Version von grapes.js Danke an alle für die Aufmerksamkeit.
Wenn man ein UI-Framework verwendet, das benutzerdefinierte Klassen bereitstellt, wäre es schön, diese Klassen auf Panels einsetzen zu können, damit man das CSS nicht umschreiben muss. Eine mögliche Syntax kann sein: '''js panelManager.addPanel({ id: 'myNewPanel', Visible: Wahr, Knöpfe: [...], Klassen: ['meinCustomKla...
artf
Man kann Attribute auf diese Weise festlegen '''js Redakteur. Panels.addPanel({ id: 'myNewPanel', ... Attribute: {'data-stuff': 'val1', 'classe': 'val2'} }) ```
Lock[Bot]
Dieser Thread wurde automatisch gesperrt, da es nach seiner Schließung keine jüngste Aktivität gegeben hat. Bitte eröffne eine neue Ausgabe wegen verwandter Bugs.
Was mache ich mit gjs-assets, gjs-components, gjs-css, gjs-html und gjs-style? und wie lade ich diese Dinge in meinen Editor?
artf
'GJS-HTML' und 'GJS-CSS' sind Ihre Endergebnisse, daher würden Sie sie wahrscheinlich auf einer Seite für den Endnutzer ausdrucken. 'gjs-components' und 'gjs-style' enthalten die JSON-Daten zu deiner Vorlage, sodass du diese verwenden muss...
Josefph
@artf gäbe es Probleme, wenn ich einfach das gespeicherte HTML und CSS in den Editor einfüge, um es zu bearbeiten? Und nicht die GJS-Komponenten und den GJS-Stil verwenden?
artf
@pranzikkin wenn du benutzerdefinierte Elemente verwendest und dir die Konsistenz beim Bearbeiten deiner Vorlagen wichtig ist, ja, dann wirst du Probleme bekommen