Wie exportiere ich Draw.io-XML-Daten mithilfe der Javascript-API für meine benutzerdefinierte Webanwendung? (Abrufen von ⇐ JavaScript

[Guest]

Beschreibung

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:
  

  Code: Select all

  https://app.flingex.com/draw/

• Integration mit Web App:
  
  Ich habe das eingebettet Draw.io-Editor in einem Iframe in einer meiner Webanwendungen mit dem folgenden Code:

  Code: Select all

• Ziel:
  
  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:

  Code: Select all

  const iframe = document.getElementById('drawio_iframe');
  iframe.contentWindow.postMessage(
  { action: 'export', format: 'xml' },
  'https://app.flingex.com'
  );
  

• Auf Nachrichten im Iframe lauschen
  
  Ich habe den Iframe direkt in einem geöffnet neuer Tab (

  Code: Select all

  https://app.flingex.com/draw/

  ) und diesen Listener zum Debuggen hinzugefügt:

  Code: Select all

  window.addEventListener('message', function(event) {
  console.log('Message received:', event);
  });
  

• Ergebnisse:
  • 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?

Zusätzliche Informationen

• 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.

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.

**Tags **

• Code: Select all

  draw.io

• Code: Select all

  iframe

• Code: Select all

  postmessage

• Code: Select all

  javascript

• Code: Select all

  html