如何在iframe中输出codemirror的结果？

Question

我正在尝试制作一个 HTML 代码播放器，您可以在其中输入 html 并在 iframe 中获得结果。如果我只使用 textarea 并在 iframe 中输出，它会很好用。但是如果我使用代码镜像并尝试将 coremirror 值放入 iframe 它会在 iframe 中显示代码而不是显示结果。

<!DOCTYPE html>
<html>

  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="codemirror/codemirror/lib/codemirror.js"></script> 
  <link rel="stylesheet" href="codemirror/codemirror/lib/codemirror.css"/> 
  <link rel="stylesheet" href="codemirror/codemirror/theme/neo.css">

  <script src="codemirror/codemirror/mode/javascript/javascript.js"></script>   
  <script src="codemirror/codemirror/mode/css/css.js"></script>  
  <script src="codemirror/codemirror/mode/htmlmixed/htmlmixed.js"></script>  

   <script src="codemirror/codemirror/addon/hint/show-hint.js"></script>
   <script src="codemirror/codemirror/addon/hint/css-hint.js"></script>
   <link rel="stylesheet" href="codemirror/codemirror/addon/hint/show-hint.css">

  <style>
  body {
    background-color: #eee;
}
iframe{height:600px;width:400px}
</style>
  </head>

  <body>  
      <div id="codeeditor"></div>
      <iframe>Example</iframe>
      <button>RUN</button>
    <script>
       var editor = CodeMirror(document.getElementById("codeeditor"), {
    value: "<html><body><h1>Helloworld</h1></body></html>",
    mode: "css",
    theme: "neo",
    extraKeys: {"Ctrl-Space": "autocomplete"}
});
     $("button").click(function(){
          $("iframe").contents().find("body").html($("#codeeditor").html());
     })


    </script>
  </body>

</html>

Answer 1

不要使用 jQuery 获取编辑器内容，而是使用 codemirror 方法 getValue，如下所示：

$("button").click(function(){     
  $("iframe").contents().find("body").html(editor.getValue());
})

如何在iframe中输出codemirror的结果？

How to output result of codemirror in iframe?

html

javascript

jquery

codemirror