如何将 codemirror js 编辑器加载到 iframe 中？答案

【问题标题】：How to load codemirror js editor into an iframe?如何将 codemirror js 编辑器加载到 iframe 中？
【发布时间】：2015-06-18 10:44:53
【问题描述】：

我想将 codemirror js 编辑器加载到 iframe 中以避免样式覆盖。我阅读了文档https://codemirror.net/doc/manual.html#config，但不清楚。这是我尝试过的。

HTML

<iframe id="code"></iframe>

  var codemirror = CodeMirror(document.getElementById("code").contentWindow.document.body, {
                    mode: "javascript",
                    theme: "monokai"
  });

如何将 codemirror js 编辑器加载到 iframe 中？

【问题讨论】：

是加载事件处理程序中的初始化代码吗？ codemirror.js 在哪里？样式表呢，它在 iframe 里面吗？ is not working 不是正确的问题陈述
@charlietfl codemirror.js 和样式表包含在parent 文档中。
样式表需要附加到 iframe 中，并且在尝试操作之前需要确保 iframe 已加载

标签： javascript jquery iframe codemirror

【解决方案1】：

将以下代码放在您的 html 标记中。

<iframe src="https://codemirror.net/doc/manual.html#config"></iframe>

【讨论】：

对不起，我相信我的问题对你来说不是很清楚。我想在我的网页中使用 codemirror js 编辑器。

【解决方案2】：

如果您想在 iframe 中使用 CodeMirror，您将需要两个不同的 html 文件。请参阅下面的一个非常简单的示例。请更具体一点以了解更多要求。

iframe.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel=stylesheet href="http://codemirror.net/doc/docs.css">
    <link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
    <script src=http://codemirror.net/lib/codemirror.js></script>
    <script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
    <style type=text/css>
        .CodeMirror {float: left; width: 100%; height: 100%; }
    </style>  
</head>
<body>
  <div>
    <textarea id=content name="content"></textarea>
  </div>
    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
        mode: 'application/x-httpd-php',
        lineNumbers: true
      });
    </script>
  </body>
</html>

main.html

<!DOCTYPE html>
<html>
<body>
  <iframe src="iframe.html"></iframe>
</body>
</html>

【讨论】：