Testing CodeMirror

by Eric Pias

HTML

<h1>Using CodeMirror (editable code)</h1>
  
<p><a href="http://codemirror.net/mode/javascript/index.html">http://codemirror.net/mode/javascript/index.html</a></p>

    <link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
    <script src="http://codemirror.net/lib/codemirror.js"></script>
    <script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
    <script src="http://codemirror.net/addon/edit/continuecomment.js"></script>
    <script src="http://codemirror.net/mode/javascript/javascript.js"></script>


    <h2>Editable</h2>
        
        <a id="showItButton" >Show It</a>  
        <a id="addJunkButton" >Add Junk to text area</a> 
    
<textarea rows="4" cols="50" name="codesnippet_editable" id="codesnippet_editable">
// Demo code (the actual new parser character stream implementation)

function StringStream(string) {
  this.pos = 0;
  this.string = string;
}

</textarea>

</div>

JavaScript

window.onload = function () {
  
    var editableCodeMirror = CodeMirror.fromTextArea(document.getElementById('codesnippet_editable'), {
        mode: "javascript",
        theme: "default",
        lineNumbers: true,
        matchBrackets: true
    });
    
    editableCodeMirror.on('blur', editableCodeMirror.save);



  //alert(document.getElementById('showItButton'));
  document.getElementById('showItButton').onclick = function() {
      alert(document.getElementById('codesnippet_editable').value);
  };
    
  document.getElementById('addJunkButton').onclick = function() {
      //alert('here');
      var textArea = document.getElementById('codesnippet_editable');
      var text = textArea.value;
      textArea.value = text + "\nMore Junk";
      //alert(textArea.value);
      
      editableCodeMirror.getDoc().setValue(textArea.value);
      //alert('here');
  };
    
    
};