Hi all.
I'm creating a page where I'd like to integrate drawio into DW. It works well on a standard page by using this script:
var url = 'https://www.draw.io/?embed=1&ui=atlas&spin=1&modified=unsavedChanges&proto=json';
var iframe = document.getElementById('drawioiframe');
iframe.src = url;
window.addEventListener('message',function(evt) {
var source = document.getElementById('drawioimg');
if (evt.data.length > 0)
{
var msg = JSON.parse(evt.data);
// Received if the editor is ready
if (msg.event == 'init')
{
// Sends the data URI with embedded XML to editor
iframe.contentWindow.postMessage(JSON.stringify({action: 'load', xmlpng: source.getAttribute('src')}), '*');
}
// Received if the user clicks save
else if (msg.event == 'save')
{
// Sends a request to export the diagram as XML with embedded PNG
iframe.contentWindow.postMessage(JSON.stringify({action: 'export', format: 'xmlpng', spinKey: 'saving'}), '*');
}
// Received if the export request was processed
else if (msg.event == 'export')
{
// Updates the data URI of the image
source.setAttribute('src', msg.data);
obj = { "image": encodeURIComponent(source.getAttribute('src')) };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "json_post.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
}
}
},false);
and this callback "json_post.php":
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_POST["x"], false);
$myfile = fopen("diagrams/limbic02.drawio", "w") or die("Unable to open file!");
fwrite($myfile, $obj->image);
fclose($myfile);
?>
in the main page I just embed the drawio in a frame (index.php):
<html>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Limbic</title>
<link rel="stylesheet" type="text/css" href="limbic.css">
</head>
<body>
<?php
$filename = "diagrams/limbic02.drawio";
$drawiofile = fopen($filename, "r") or die("Unable to open file!");
$src = fread($drawiofile,filesize($filename));
echo '<img align="right" width="10%" id="drawioimg" style="cursor:default;" src="';
echo $src;
echo '">';
fclose($drawiofile);
?>
<h1>The Limbic system circuit diagram project</h1>
<p>The page aims to document the circuit diagram of the limbic system.</p>
<iframe id='drawioiframe'></iframe>
<script src="drawio.js"></script>
<p>
</p>
</body>
can somebody point me to a plugin which does JSON calls which I could hack? I had a look at the drag/drop plugins which are probably closest.
Best,
/Bernd