Question

我已经设置了两个div来分别使用CSS和HTML。两者都像Codemirror所宣传的那样工作。问题是当我尝试将上述任一div中的值输出到iframe时。我已经尝试了我能想到的一切，但仍然没有。我已经搜索并搜索了更多的解决方案，我发现没有任何效果。谢谢你的时间。任何帮助表示赞赏。

<!doctype html>

    <head>
        <script src="lib/codemirror.js"></script>
        <link rel="stylesheet" href="lib/codemirror.css">
        <link rel="stylesheet" href="theme/material.css">
        <script src="mode/javascript/javascript.js"></script>
        <script src="mode/css/css.js"></script>
        <link rel="stylesheet" href="addon/hint/show-hint.css">
        <script src="addon/hint/show-hint.js"></script>
        <script src="addon/hint/css-hint.js"></script>
        <script src="mode/xml/xml.js"></script>
    </head>

    <body>
        <iframe id="output" src=""></iframe>

        <div>CSS</div>

        <div id="css" class="content" contenteditable></div>
        <div>HTML</div>
        <div id="html" class="content" contenteditable></div>

        <script>
        var editor = CodeMirror(document.getElementById("css"), {

            mode: "css",
            theme: "material",
            tabSize: 2,
            lineNumbers: true,
            extraKeys: {
                "Ctrl-Space": "autocomplete"
            },
        });
        </script>

        <script>
        var editor = CodeMirror(document.getElementById("html"), {

            mode: "xml",
            htmlMode: true,
            theme: "material",
            tabSize: 2,
            lineNumbers: true,
            extraKeys: {
                "Ctrl-Space": "autocomplete"
            }
        });
        </script>

        <script>
        window.onload = function() {
            var html = document.getElementById("html"),
                css = document.getElementById("css"),
                output = document.getElementById("output"),
                working = false,
                fill = function() {
                    if (working) {
                        return false;
                    }
                    working = true;
                    var document = output.contentDocument,
                        style = document.createElement("style"),
                        document.body.innerHTML = html.textContent;
                    style.innerHTML = css.textContent.replace(/\s/g, "");
                    document.body.appendChild(style);
                    working = false;
                };
            html.onkeyup = fill;
            css.onkeyup = fill;
        }
        </script>
    </body>

    </html>

如何从Codemirror HTML和CSS div输出到iframe？

0 个答案: