Display the textarea content in alert while using code mirror

0
votes

I am trying to alert the content of the textarea which is used as code mirror on a button click. But it displays as blank. if i remove the script for code mirror, it displays the content.

I need to know what is wrong with using code mirror. It doesn't reflect the changes in the textarea.

<textarea id="code" name="code">
</textarea>
<input type="button" onClick="func()">
    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true
      });
function func() {
alert(document.getElementById('code').value);
}
    </script>

Please help me out.

1
javascriptjqueryhtmlcodemirror
You need to post the re-rendered html of code textarea. – Jai
@Jai May i know how to do this? – user3784251
you can inspect it in browser and you can see what has just happend to your element, what are the changes has been applied when CodeMirror attached to it. – Jai
@user3784251 Check out my answer and let me know if it works? – Praveen Kumar Purushothaman
possible duplicate of How to get the value of Codemirror textarea – gmo

1 Answers

1
votes

You need to use the editor.getValue() programming API command to get the value from the code editor.

input {font-family: 'Segoe UI';}
<!-- Create a simple CodeMirror instance -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/codemirror.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/codemirror.min.js"></script>
<textarea name="" id="myTextarea" cols="30" rows="10"></textarea>
<input type="button" value="Code?" onclick="func();">
<script>
  var editor = CodeMirror.fromTextArea(myTextarea, {
    lineNumbers: true
  });
  var func = function () {
    alert(editor.getValue());
  }
</script>