Question

我没有尝试过如何做到这一点，遗憾的是我无法弄清楚如何在HTML文件中集成codemirror库。

我有一个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>

这是工作小提琴http://jsfiddle.net/dsaket/tqL7z213/1/。

此外，对于进一步的查询，您应该查看codemirror提供的演示文件。

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

1 个答案: