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

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

javascript jquery html

Javascript 如何在iframe中输出codemirror的结果？,javascript,jquery,html,codemirror,Javascript,Jquery,Html,Codemirror,我正在尝试制作一个HTML代码播放器，在其中输入HTML并在iframe中获得结果。如果我只在iframe中使用textarea和output，效果会很好。但如果我使用代码镜像并尝试将coremirr值放入iframe中，它会在iframe中显示代码，而不是显示结果 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.

我正在尝试制作一个HTML代码播放器，在其中输入HTML并在iframe中获得结果。如果我只在

iframe

中使用textarea和output，效果会很好。但如果我使用代码镜像并尝试将coremirr值放入

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>


身体{
背景色：#eee；
}
iframe{高度：600px；宽度：400px}
例子
跑
var editor=CodeMirror（document.getElementById（“codeeditor”）{
值：“Helloworld”，
模式：“css”，
主题：“近地天体”，
外键：{“Ctrl空格”：“自动完成”}
});
$（“按钮”）。单击（函数（）{
$（“iframe”）.contents（）.find（“body”）.html（$（“#codeeditor”）.html（））；
})

不要使用jQuery获取编辑器内容，而是使用codemirror方法

getValue

如下所示：

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

上周我不得不换成了ace。现在我也知道如何使用代码镜像了。谢谢：）。如果你使用的是javascript模式，最好使用

doc.open/write/close