how to create an java editor in a web page

I am creating a web portal and database to teach students how to program.

I want to have a editor on the page so that the students can see what they are doing if you know what I mean.

I can do basic HTML but trying to do an editor is bit advanced for me which I am willing to learn.

What is the best way of going about it I have heard of codemirror but not sure how to use it.

Many Thanks

Solution

You can start by looking at the documentation and especially at the code from this example: http://codemirror.net/mode/clike/index.html

The code to create the editor is pretty simple. You need a text area with an id:

<textarea id="java-code"></textarea>

and this JavaScript to create the editor:

  var javaEditor = CodeMirror.fromTextArea(document.getElementById("java-code"), {
    lineNumbers: true,
    matchBrackets: true,
    mode: "text/x-java"
  });
  var mac = CodeMirror.keyMap.default == CodeMirror.keyMap.macDefault;
  CodeMirror.keyMap.default[(mac ? "Cmd" : "Ctrl") + "-Space"] = "autocomplete";