Search code examples
javascriptjquerytextareacodemirroronkeyup

CodeMirror using jQuery .keyup on editor textarea


I want to getValue of Codemirror editor on keyup but it did not work. Here's the fiddle

var mixedMode = {
        name: "htmlmixed",
        scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
                       mode: null},
                      {matches: /(text|application)\/(x-)?vb(a|script)/i,
                       mode: "vbscript"}]
      };
      var editor = CodeMirror.fromTextArea(document.getElementById("HTML"), {mode: mixedMode,lineNumbers: true  });

$(document).ready(function(){
  $("#HTML").keyup(function(){
    html = editor.getValue();
    alert(html);
    });
}); 

Solution

  • CodeMirror hides the textarea element, for listening to the events of the editor instance you can use the on method:

    $(document).ready(function () {
        editor.on('change', function () {
            html = editor.getValue();
            alert(html);
        });
    });
    

    You can find the list of the supported events in the CodeMirror's manual.

    http://codemirror.net/doc/manual.html#events