HTML-тег в тексте с использованием embed.js
Я хотел показать диаграмму на веб-странице, используя скрипт draw.io's 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>