Как экспортировать данные Draw.io «xml» с помощью API JavaScript для моего пользовательского веб-приложения? (Получение ⇐ Javascript

[Anonymous]

Описание

Я работаю над интеграцией редактора Draw.io в свое собственное веб-приложение, основанное на html css js. Как разработчик моделей данных, я мало знаю JavaScript. Я успешно встроил Draw.io в iframe и могу в некоторой степени с ним взаимодействовать. Однако мне нужна помощь в извлечении XML-данных спроектированной диаграммы ERD с холста и передаче их обратно в мое приложение для дальнейшей обработки и создания сценария SQL DDL из модели ERD. Но я не могу этого сделать, и вот моя текущая ситуация:

Текущая настройка

• < li>Среда хостинга:
  
  Я развернул редактор Draw.io на своем сервере, используя Tomcat, с NGINX в качестве прокси. Приложение доступно по этому URL:
  

  Код: Выделить всё

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

• Интеграция с веб-приложением:
  
  Я встроил Редактор Draw.io в iframe в одном из моих веб-приложений, используя следующий код:

  Код: Выделить всё

• Цель:
  
  Я хочу получить чистые XML-данные диаграммы созданный в редакторе Draw.io через iframe с использованием postMessage. Затем данные XML будут сохранены в базе данных для дальнейшей обработки и создания сценария SQL DDL из модели ERD.

< strong>Что я пробовал

• Отправка postMessage в Iframe
  
  Для отправки сообщения в iframe я использовал следующий код JavaScript:

  Код: Выделить всё

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

• Прослушивание сообщений в iframe
  
  Я открыл iframe непосредственно в новая вкладка (

  Код: Выделить всё

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

  ) и добавил этот прослушиватель для отладки:

  Код: Выделить всё

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

• Результаты:
  • postMessage, кажется, отправляется успешно, но я не вижу ответа или XML-данных, возвращаемых в мое приложение.
  • Никакие сообщения не регистрируются в консоли iframe.

Ожидаемое поведение

• Когда я отправляю { действие: 'export', формат: 'xml' в iframe, я ожидаю, что iframe ответит экспортированными XML-данными из холста Draw.io.

Вопросы >

• Есть ли какая-либо дополнительная конфигурация или настройка API, необходимая для того, чтобы Draw.io мог обрабатывать события postMessage для экспорта данных XML?
• Есть ли какие-либо разрешения, заголовки или конфигурации происхождения, которые мне нужно настроить на сервере или в iframe, чтобы это работало?
• Может ли кто-нибудь предоставить рабочий пример или руководство по достижению этой интеграции?

Дополнительная информация

• Развертывание Draw.io: самостоятельное размещение (Tomcat + NGINX)
• Приложение: APEX (интеграция на основе HTML, CSS и JavaScript)
  li>
  Я не использую embed=1 в URL-адресе iframe, так как хочу, чтобы инструменты дизайна оставались видимыми.
• URL-адрес https: //app.flingex.com/draw/ работает нормально при прямом доступе.

Что мне нужно

Я ищу руководство о том, как правильно реализовать следующее:

• Отправить сообщение из моего веб-приложения в iframe, чтобы запустить экспорт XML.
• Получите экспортированные XML-данные в родительском приложении (через postMessage или другой
• Любые конкретные настройки, сценарии или фрагменты кода Draw.io, необходимые для включения этой функции.

Спасибо!

Я ценю любую помощь или предложения по решению этой проблемы. Дайте мне знать, если вам нужна дополнительная информация или доступ к каким-либо конкретным фрагментам кода.

**Теги **

• Код: Выделить всё

  draw.io

• Код: Выделить всё

  iframe

• Код: Выделить всё

  postmessage

• Код: Выделить всё

  javascript

• Код: Выделить всё

  html

Подробнее здесь: https://stackoverflow.com/questions/793 ... b-applicat