Question

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

HTML

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

的js

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

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

Answer 1

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

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

Answer 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>

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

2 个答案: