CODEWITHSUNDEEP
javascripthtmlcsscodemirror
dev777
dev777

Reputation: 25

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.

Upvotes: 0

Views: 1567

Answers (2)

Sumith Harshan
Sumith Harshan

Reputation: 6445

If you're planning to get the values from textarea using php, you can use textarea ID using CodeMirror.fromTextArea.

To do that, call like below. This WORKS

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

CodeMirror.fromTextArea(document.getElementById("myCode"), {
  lineNumbers: true,
  tabSize: 2 
});

If you use document.querySelector, that values can't get from php POST or GET methods. This is same for ace editor as well.

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

CodeMirror(document.querySelector('#leafbridge-config-ui-custom-css'), {
  lineNumbers: true,
  tabSize: 2 
});

Upvotes: 0

dsaket
dsaket

Reputation: 1896

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.

Upvotes: 1

Related Questions