Installation

Download the latest version from the CodeMirror website. As of today, it is version 0.62. After you unzip it you will see 3 directories – js, css and contrib. contrib holds parsers that other people have written such as the lua, python and PHP. css holds the color schemes for syntax highlighting and js contains the necessary scripts for CodeMirror to run.

Basic Usage

If we have a textarea with an id of code that we wanted to turn into a CodeMirror editor with a MirrorFrame(more on this later) then we would use the code below. Note that we need to specify where the parserfiles and stylesheets for the particular type of syntax (in this case javascript) are located.

  var textarea = document.getElementById('code');
  var editor = new MirrorFrame(CodeMirror.replace(textarea), {
    height: "350px",
    content: textarea.value,
    parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
    stylesheet: "css/jscolors.css",
    path: "js/",
    autoMatchParens: true
  });

The result would be:

MirrorFrame

The MirrorFrame class extends the syntax highlighter and makes the editor feel more of a true editor – with a toolbar/buttons. You can find the source of the MirrorFrame implementation in js/mirrorframe.js. As an example we’ll take the ‘get current line number’ function. It references this which in our case is the current editor. There are alot of functions CodeMirror makes available (list here), you can write your own functions and attach them to a button in your own MirrorFrame editor.

  line: function() {
    alert("The cursor is currently at line " + this.mirror.currentLine());
    this.mirror.focus();
  },

CodeMirror

We can pass many configuration options to the CodeMirror class when we instantiate it such as whether we want line numbering and the size of tab width. An example below:

editor = CodeMirror.fromTextArea(textarea, {
content: textarea.value,
parserfile: ["parser/tokenizejavascript.js", "parser/parsejavascript.js"],
stylesheet: "css/editor_colours/jscolours.css",
path: "js/",
autoMatchParens: true,
width: '100%',
height: '100%',
textWrapping: false,
lineNumbers: true,
tabMode: 'spaces',
iframeClass: 'ifc',
indentUnit: 4
});

There are also 2 events available for the developer to use. onChange and initCallBack. initCallBack is called when the editor has loaded and is ready for the user to start entering code (remember an iframe is created, additional javascript files are loaded). onChange occurs whenever a change is made in the editor itself. If we wanted to build an on-the-fly code tester, and needed to fetch the code from the editor whenever the code in the editor changed, then we would do the following:

  var editor = CodeMirror.fromTextArea(textarea, {
    height: "350px",
    content: textarea.value,
    parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
    stylesheet: "css/jscolors.css",
    path: "js/",
    autoMatchParens: true,
    onChange: function (n) { alert(editor.getCode()); },
  });

This was just a quick look at CodeMirror, but hopefully you can appreciate just how powerful it is. It could be used in your website’s admin interface to alter code on the fly, or be used in Titanium or AIR to create a desktop IDE in HTML/Javascript.

We are going to start writing the PHP code to process the form. This is fairly basic stuff, using $_POST to get the values from the form, then checking them against pre-assigned values, if they match, then echo approved, if they don’t then echo denied.

So at the end of this stage, you will have an HTML form set up and this PHP file. You can enter the username Panzer and the password of query7 into the form and it will return Logged in.

Next tutorial, the fun part, the AJAX!

It might take a little while to finish up so i might not be posting much over the next week (sorry) but it will be worth it in the end.