javascript - 使用 embed.js 的文本中的 HTML 标记
问题描述
我想使用 draw.io 的 embed.js 脚本在网页上显示图表。网页上可以看到一个矩形,但文字是:(<div>A</div><div>B<br></div>
最初没有标签,只有 A 和 B 在不同的行中)。
编码:
<div id="mxfile" style="display: none;">
%3cmxGraphModel%20dx%3d%222066%22%20dy%3d%221098%22%20grid%3d%221%22%20gridSize%3d%2210%22%20guides%3d%221%22%20tooltips%3d%221%22%20connect%3d%221%22%20arrows%3d%221%22%20fold%3d%221%22%20page%3d%221%22%20pageScale%3d%221%22%20pageWidth%3d%22827%22%20pageHeight%3d%221169%22%20background%3d%22%23ffffff%22%20math%3d%220%22%20shadow%3d%220%22%3e%0d%0a%20%20%3croot%3e%0d%0a%20%20%20%20%3cmxCell%20id%3d%220%22%20%2f%3e%0d%0a%20%20%20%20%3cmxCell%20id%3d%221%22%20parent%3d%220%22%20%2f%3e%0d%0a%20%20%20%20%3cmxCell%20id%3d%222%22%20value%3d%22%26lt%3bdiv%26gt%3bA%26lt%3b%2fdiv%26gt%3b%26lt%3bdiv%26gt%3bB%26lt%3bbr%26gt%3b%26lt%3b%2fdiv%26gt%3b%22%20style%3d%22rounded%3d0%3bwhiteSpace%3dwrap%3bhtml%3d1%3b%22%20vertex%3d%221%22%20parent%3d%221%22%3e%0d%0a%20%20%20%20%20%20%3cmxGeometry%20x%3d%2220%22%20y%3d%2220%22%20width%3d%22120%22%20height%3d%2260%22%20as%3d%22geometry%22%20%2f%3e%0d%0a%20%20%20%20%3c%2fmxCell%3e%0d%0a%20%20%3c%2froot%3e%0d%0a%3c%2fmxGraphModel%3e
</div>
<script type="text/javascript" src="https://www.draw.io/embed.js"></script>
为了创建 div 的内容,我从 draw.io 的在线编辑器(文本显示正确)导出了一个图表到 XML 并对其进行 URL 编码。
我也使用过这个脚本:
<script>
var DRAW_IFRAME_URL = 'https://www.draw.io/?embed=1';
var graph = null;
var xml = null;
function mxClientOnLoad(stylesheet) {
xml = document.getElementById('mxfile').innerHTML;
xml = decodeURIComponent(xml);
// Removes all illegal control characters before parsing
var checked = [];
for (var i = 0; i < xml.length; i++) {
var code = xml.charCodeAt(i);
// Removes all control chars except TAB, LF and CR
if (code >= 32 || code == 9 || code == 10 || code == 13) {
checked.push(xml.charAt(i));
}
}
xml = checked.join('');
var div = document.createElement('div');
div.style.width = '100%';
div.style.height = '100%';
div.style.position = 'relative';
document.body.appendChild(div);
graph = new mxGraph(div);
graph.resetViewOnRootChange = false;
graph.foldingEnabled = false;
// NOTE: Tooltips require CSS
graph.setTooltips(false);
graph.setEnabled(false);
// Loads the stylesheet
if (stylesheet != null) {
var xmlDoc = mxUtils.parseXml(stylesheet);
var dec = new mxCodec(xmlDoc);
dec.decode(xmlDoc.documentElement, graph.getStylesheet());
}
var xmlDoc = mxUtils.parseXml(xml);
var codec = new mxCodec(xmlDoc);
codec.decode(codec.document.documentElement, graph.getModel());
graph.maxFitScale = 1;
graph.fit();
graph.center(true, false);
window.addEventListener('resize',
function () {
graph.fit();
graph.center(true, false);
});
}
</script>
解决方案
推荐阅读
- python - Groupby 绘图和设置颜色
- c# - InvalidProgramException:(包装器动态方法)对象中的无效 IL 代码:GetField():IL_0000:ret
- php - while 循环中的 while 循环 PHP
- r - 尝试在 R 中使用 plot() 创建箱线图时,为什么会出现错误?
- ruby-on-rails - 红宝石时间间隔不起作用45分钟
- javascript - 通过按钮编辑和删除列表+更改本地存储
- python - 融合来自不同目录的许多具有相同名称的 csv 文件
- python - 如何找到列 CumSum 等于 X 的 Pandas 数据帧的行索引?
- excel - Excel VBA 数据透视表更改字段在调试中工作,执行时出现错误 1004
- android - 完成活动后如何刷新片段?