如何在 HTM 文件中集成 Codemirror 库？

Question

我已经尝试过很多次我该怎么做，不幸的是我不知道如何将 codemirror 库集成到 HTML 文件中。

我有一个 HTML 文件，我下载了 codemirror。我还在我的 html 目录中包含了 lib 文件夹，但是当我在浏览器中看到它时，没有创建 codemirror 编辑器。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Web Editor</title>
<!-- Create a simple CodeMirror instance -->
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script>
  var editor = CodeMirror.fromTextArea(myTextarea, {
    lineNumbers: true
  });
</script>
</head>
    <body>
        <table>
            <tr>
                <td>
                    <div class="tag">HTML (Body)</div>
                    <div id="html" class="content" contenteditable></div>
                </td>
                <td>
                    <div class="tag">CSS</div>
                    <div id="css" class="content" contenteditable></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="tag">JavaScript</div>
                    <div id="js" class="content" contenteditable></div>
                </td>
                <td>
                    <div class="tag">Output</div>
                    <iframe id="output">Hello</iframe>
                </td>
            </tr>
        </table>
    </body>
</html>

如何创建示例代码镜像编辑器？谢谢。

Answer 1

您应该首先在您的codemirror 实例中定义一个myTextarea。像这样在 html 文件中包含一个 textarea，

<textarea id="myCode"></textarea>

现在，像这样定义myTextarea，

var myTextarea = document.getElementById("myCode");

因此，最终您的文件将如下所示，

<body>
    <textarea id="myCode"></textarea>

    <script type="text/javascript">
      window.onload = function() {
        var myTextarea = document.getElementById("myCode");
        editor = CodeMirror.fromTextArea(myTextarea, {
          lineNumbers: true
        });
      };
    </script>
</body>

这是工作 fiddle http://jsfiddle.net/dsaket/tqL7z213/1/。

另外，如需进一步查询，您应该查看codemirror提供的演示文件。

如何在 HTM 文件中集成 Codemirror 库？

How do I integrate Codemirror library in HTM file?

javascript

css

codemirror