繁体   English   中英

如何将Codemirror js编辑器加载到iframe中?

[英]How to load codemirror js editor into an iframe?

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

的HTML

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

s

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

如何将Codemirror js编辑器加载到iframe中?

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

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

如果要在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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM