0

I have set up two divs to work with CSS and HTML respectively. Both work as advertised by Codemirror. The issue is when I try to output the values from either of the aforementioned divs to the iframe. I have tried everything I can think of and still nothing. I have searched and searched some more for a solution and nothing I've found has worked. Thanks for your time. Any help is appreciated. 

<!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>
C.How
  • 1
  • 1
  • It's not quite clear what are you trying to achieve. `iframe`'s content is not manipulatable unless it's from the same domain (http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe). And still, what's the point of manipulating an `iframe` with empty `src`? – YakovL Oct 12 '16 at 21:11
  • I am trying to make an in browser html and css editor. The output is that of a web page. – C.How Oct 12 '16 at 21:22
  • So why iframe? To isolate CSS from the editor's one? Have you considered to save the html via back-end and refreshing the iframe? That would be natural if you are creating an html *editor*, not previewer. – YakovL Oct 12 '16 at 23:38
  • This is my first go around with this stuff. What I am after is a Codepen.io like editor. I plan on putting it on my personal website. I have read that the iframe is how you would do this. When I've combed the source on many sites in the same vein they feature an iframe for the output. I hope that clarifies what and why I am after what it is I am after. Thanks. – C.How Oct 12 '16 at 23:49
  • Yeap, you're right, codepen uses iframes. And I suspect they also use back-end to save the html they show in that iframe (but I may be wrong). – YakovL Oct 13 '16 at 02:42

0 Answers0