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

Форум по Javascript
Anonymous
Как экспортировать данные Draw.io «xml» с помощью API 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, необходимые для включения этой функции.

Спасибо!

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

**Теги **

Подробнее здесь: https://stackoverflow.com/questions/793 ... b-applicat
Вернуться к началу

Вернуться в «Javascript»