66 lines
2.1 KiB
HTML
66 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
<title>ZenUML</title>
|
|
<link
|
|
rel="stylesheet"
|
|
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.1/lib/codemirror.min.js"></script>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/codemirror.min.css"
|
|
crossorigin="anonymous"
|
|
integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"
|
|
/>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
.container-iframe {
|
|
overflow-y: scroll;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
}
|
|
.container-iframe::-webkit-scrollbar {
|
|
/* WebKit */
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.CodeMirror {
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="h-screen">
|
|
<div class="m-1 flex h-full w-full" id="diagram1">
|
|
<div class="editor w-96 h-full shrink-0">
|
|
<textarea id="text" class="col-span-1 m-1 border-2" cols="30" rows="200"></textarea>
|
|
</div>
|
|
<div class="viewer grow bg-gray-50">
|
|
<iframe
|
|
id="embed"
|
|
src="embed.html"
|
|
class="container-iframe"
|
|
scrolling="no"
|
|
style="width: 100%; height: 100%; border: none"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const editor = CodeMirror.fromTextArea(document.getElementById('text'), {
|
|
lineNumbers: true,
|
|
});
|
|
editor.on('change', function (cm) {
|
|
const iframe = document.getElementById('embed');
|
|
iframe.contentWindow.postMessage({ action: 'eval', args: { code: cm.getValue() } }, '*');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|