Ich arbeite an der Integration des Draw.io-Editors in meine benutzerdefinierte Webanwendung, die auf HTML, CSS, JS basiert. Als Datenmodellierer kenne ich mich kaum mit Javascript aus. Ich habe Draw.io erfolgreich in einen Iframe eingebettet und kann einigermaßen damit interagieren. Ich benötige jedoch Hilfe beim Abrufen der XML-Daten des entworfenen ERD-Diagramms aus der Leinwand und bei der Rückgabe an meine Anwendung zur weiteren Verarbeitung und beim Generieren eines SQL-DDL-Skripts aus dem ERD-Modell. Aber das gelingt mir nicht und hier ist meine aktuelle Situation:
Aktuelles Setup
< li>Hosting-Umgebung:
Ich habe den Draw.io-Editor auf meinem eigenen Server mit Tomcat und NGINX als Proxy bereitgestellt. Die Anwendung ist über diese URL erreichbar:
Ich möchte die sauberen XML-Daten des Diagramms abrufen entworfen im Draw.io-Editor über den Iframe mit postMessage. Die XML-Daten werden dann zur weiteren Bearbeitung in der Datenbank gespeichert und generieren ein SQL-DDL-Skript aus dem ERD-Modell.
< strong>Was ich versucht habe
Senden von postMessage an den Iframe
Ich habe das folgende JavaScript verwendet, um eine Nachricht an den Iframe zu senden:
Die postMessage scheint erfolgreich gesendet zu werden, aber ich sehe keine Antwort oder XML-Daten, die an meine Anwendung zurückgegeben werden.
In der Iframe-Konsole werden keine Nachrichten protokolliert.
Erwartetes Verhalten
Wenn ich { action: 'export', format: 'xml' an den Iframe erwarte ich, dass der Iframe mit den exportierten XML-Daten aus der Draw.io-Leinwand antwortet.
Fragen
Gibt es welche Ist eine zusätzliche Konfiguration oder API-Einrichtung erforderlich, damit Draw.io postMessage-Ereignisse für den Export von XML-Daten verarbeiten kann?
Gibt es Berechtigungen, Header oder Ursprungskonfigurationen, die ich anpassen muss? auf dem Server oder im Iframe, damit dies funktioniert?
Kann jemand ein funktionierendes Beispiel oder eine Anleitung zum Erreichen dieser Integration bereitstellen?
Anwendung: APEX (HTML-, CSS- und JavaScript-basierte Integration)
Ich verwende nicht embed=1 in der Iframe-URL, da ich die Design-Tools sichtbar halten möchte.
Die URL https: //app.flingex.com/draw/ funktioniert beim Zugriff einwandfrei direkt.
Was ich brauche
Ich suche nach Anleitung, wie um Folgendes richtig zu implementieren:
Sende eine Nachricht von meiner Web-App an den Iframe, um den XML-Export auszulösen.
Rufen Sie die exportierten XML-Daten in der übergeordneten Anwendung ab (über postMessage oder eine andere Methode).
Alle spezifischen Draw.io-Einstellungen, Skripte oder Codefragmente, die zum Aktivieren dieser Funktionalität erforderlich sind.
Vielen Dank!
Ich freue mich über jede Hilfe oder Vorschläge zur Lösung dieses Problems. Lassen Sie mich wissen, wenn Sie weitere Details oder Zugriff auf bestimmte Codeausschnitte benötigen.
[h4][b]Beschreibung[/b][/h4] Ich arbeite an der Integration des Draw.io-Editors in meine benutzerdefinierte Webanwendung, die auf HTML, CSS, JS basiert. Als Datenmodellierer kenne ich mich kaum mit Javascript aus. Ich habe Draw.io erfolgreich in einen Iframe eingebettet und kann einigermaßen damit interagieren. Ich benötige jedoch Hilfe beim Abrufen der XML-Daten des entworfenen ERD-Diagramms aus der Leinwand und bei der Rückgabe an meine Anwendung zur weiteren Verarbeitung und beim Generieren eines SQL-DDL-Skripts aus dem ERD-Modell. Aber das gelingt mir nicht und hier ist meine aktuelle Situation: [h4][b]Aktuelles Setup[/b][/h4] [list] < li>[b]Hosting-Umgebung[/b]:
Ich habe den Draw.io-Editor auf meinem eigenen Server mit Tomcat und NGINX als Proxy bereitgestellt. Die Anwendung ist über diese URL erreichbar:
[code]https://app.flingex.com/draw/[/code]
[*][b]Integration mit Web App[/b]:
Ich habe das eingebettet Draw.io-Editor in einem Iframe in einer meiner Webanwendungen mit dem folgenden Code: [code]
[/code]
[*][b]Ziel[/b]:
Ich möchte die sauberen XML-Daten des Diagramms abrufen entworfen im Draw.io-Editor über den Iframe mit postMessage. Die XML-Daten werden dann zur weiteren Bearbeitung in der Datenbank gespeichert und generieren ein SQL-DDL-Skript aus dem ERD-Modell.
[/list] [h4]< strong>Was ich versucht habe[/h4] [list] [*][b]Senden von postMessage an den Iframe[/b]
Ich habe das folgende JavaScript verwendet, um eine Nachricht an den Iframe zu senden: [code]const iframe = document.getElementById('drawio_iframe'); iframe.contentWindow.postMessage( { action: 'export', format: 'xml' }, 'https://app.flingex.com' ); [/code]
[*][b]Auf Nachrichten im Iframe lauschen[/b]
Ich habe den Iframe direkt in einem geöffnet neuer Tab ([code]https://app.flingex.com/draw/[/code]) und diesen Listener zum Debuggen hinzugefügt: [code]window.addEventListener('message', function(event) { console.log('Message received:', event); }); [/code]
[*][b]Ergebnisse[/b]: [list] Die postMessage scheint erfolgreich gesendet zu werden, aber ich sehe keine Antwort oder XML-Daten, die an meine Anwendung zurückgegeben werden. [*]In der Iframe-Konsole werden keine Nachrichten protokolliert. [/list]
[/list] [h4][b]Erwartetes Verhalten[/b][/h4] [list] [*]Wenn ich { action: 'export', format: 'xml' an den Iframe erwarte ich, dass der Iframe mit den exportierten XML-Daten aus der Draw.io-Leinwand antwortet. [/list] [h4][b]Fragen[/h4] [list] [*]Gibt es welche Ist eine zusätzliche Konfiguration oder API-Einrichtung erforderlich, damit Draw.io postMessage-Ereignisse für den Export von XML-Daten verarbeiten kann? [*]Gibt es Berechtigungen, Header oder Ursprungskonfigurationen, die ich anpassen muss? auf dem Server oder im Iframe, damit dies funktioniert? [*]Kann jemand ein funktionierendes Beispiel oder eine Anleitung zum Erreichen dieser Integration bereitstellen? [/list] [h4]Zusätzliche Informationen[/b][/h4] [list] [*]Draw.io-Bereitstellung: Selbstgehostet (Tomcat + NGINX) [*]Anwendung: APEX (HTML-, CSS- und JavaScript-basierte Integration) Ich verwende nicht embed=1 in der Iframe-URL, da ich die Design-Tools sichtbar halten möchte. [*]Die URL https: //app.flingex.com/draw/ funktioniert beim Zugriff einwandfrei direkt. [/list] [h4][b]Was ich brauche[/b][/h4] Ich suche nach Anleitung, wie um Folgendes richtig zu implementieren: [list] [*]Sende eine Nachricht von meiner Web-App an den Iframe, um den XML-Export auszulösen. [*]Rufen Sie die exportierten XML-Daten in der übergeordneten Anwendung ab (über postMessage oder eine andere Methode). [*]Alle spezifischen Draw.io-Einstellungen, Skripte oder Codefragmente, die zum Aktivieren dieser Funktionalität erforderlich sind. [/list] [h4]Vielen Dank![/h4] Ich freue mich über jede Hilfe oder Vorschläge zur Lösung dieses Problems. Lassen Sie mich wissen, wenn Sie weitere Details oder Zugriff auf bestimmte Codeausschnitte benötigen.
Ich versuche, eine einfache Leaflet-Instanz mit aktiviertem Leaflet.Draw-Plugin zu initialisieren. Ich habe alle Tutorials befolgt, die ich irgendwo im Internet finden konnte, aber der Fehler bleibt...
Ich arbeite an einer Softwareanwendung, die Daten im CSV-Format exportieren muss. Ich bin jedoch auf ein paar Probleme gestoßen:
Zeitstempel: Beim Exportieren werden die Zeitstempelfelder nicht im...
Ich erstelle einen benutzerdefinierten Texteditor mit Vanilla JavaScript und muss Funktionen implementieren, um den Inhalt aus dem Editor in eine RTF -Datei (Rich Text Format) zu exportieren.
Die...
Ich arbeite mit der SQLite3-Bibliothek in einem C++-Projekt und muss den Inhalt einer „.db“-SQLite-Datenbank in eine Nur-Text-Datei exportieren. Ich möchte jedoch den üblichen Ansatz vermeiden, jede...
Meine Anforderung besteht darin, Jest in meiner React-Web-App zu implementieren. Ich habe die Dokumentation durchsucht und sie sieht verwirrend aus. Kann mir jemand dabei helfen?
Ich habe auch mit...