使用embed.js的文本中的HTML标记

Question

我想使用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>