[SOLVED] How do I integrate Codemirror library in HTM file?

How do I integrate Codemirror library in HTM file?

I have tried no of times how can I do this, unfortunately I could not figure out how do I integrate the codemirror library in HTML file.

I have one HTML file and I downloaded the codemirror. I also included the lib folder in my html directory but when I see it in the browser the codemirror editor is not been created.

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

How can I create a sample codemirror editor ? Thanks you.

Solution

You are supposed to first define a myTextarea in your codemirror instance. Just include a textarea in your html file like this,

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

Now, define myTextarea like this,

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

Hence, finally your file would look like this,

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

Here is the working fiddle http://jsfiddle.net/dsaket/tqL7z213/1/.

Also, for further queries, you should check out the demo files provided by codemirror.