drawio-embed
Version:
automatically integrates drawio by iframe
30 lines (28 loc) • 869 B
HTML
<html>
<body>
<button onclick="openDrawio()">
打开编辑 (实际使用时，需判断 drawio 是否初始化好)
</button>
<div>png图：</div>
<img id="png" src="" />
<div>svg图：<small>(不失真，但需考虑安全性兼容性)</small></div>
<div id="svg"></div>
</body>
<script
src="https://imaoda.github.io/drawio-embed/umd/drawio-embed.min.js"
onload="openDrawio = drawioEmbed()"
></script>
<script>
const pngDom = document.querySelector("#png");
const svgDom = document.querySelector("#svg");
// 监听绘制完毕事件
window.addEventListener(
"drawioImageCreated",
({ imageType, imageContent }) => {
if (imageType === "png") pngDom.src = imageContent;
if (imageType === "svg") svgDom.innerHTML = imageContent;
}
);
</script>
</html>