CodeMirror UI

CodeMirrorUI is a simple interface written by Jeremy Green to act as a wrapper around the CodeMirror text editor widget by Marijn Haverbeke. CodeMirror is a syntax highlighter and formatter that makes it much easier to edit source code in a browser. ComeMirrorUI is a wrapper that adds interface functionality for many functions that are already built into CodeMirror itself. Functionality includes undo, redo, jump to line, reindent selection, and reindent entire document. Two options for find/replace are also available. It is based on the MirrorFrame example that Marijn included with CodeMirror.

This editor is enabled with the pop up find/replace widget.

// Here you see some JavaScript code. Mess around with it to get // acquainted with CodeMirror's features. // Press enter inside the object and your new line will be suitably // indented. var keyBindings = { enter: "newline-and-indent", tab: "reindent-selection", ctrl_z: "undo", ctrl_y: "redo", ctrl_backspace: "undo-for-safari (which blocks ctrl-z)", ctrl_bracket: "highlight-brackets", ctrl_shift_bracket: "jump-to-matching-bracket" }; // Press tab on the next line and the wrong indentation will be fixed. var regex = /foo|bar/i; function example(x) { // Local variables get a different colour than global ones. var y = 44.4; return x + y - z; }

Easily Configurable

The editor above was created with code like this:

//first set up some variables
var textarea = document.getElementById('code1');
var uiOptions = { path : 'js/', searchMode : 'popup' }
var codeMirrorOptions = { mode: "javascript" }

//then create the editor
var editor = new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);	

Creating a new CodeMirrorUI is easy, you just call:

new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);

Params for new CodeMirrorUI()

• textarea - Either a DOM element of the ID of a DOM element that should be replaced with the editor UI.
• uiOptions - Options for the CodeMirrorUI object.
  • path - String - The path to the codemirror-ui js directory (relative to the current document).
  • searchMode - String - Options are 'inline' or 'popup'
  • buttons - Array - An array of button names that should be included in the button bar.
• codeMirrorOptions - Standard optiosn that you would pass to any CodeMirror constructor. See the CodeMirror manual for more details;

Installing

To install CodeMirrorUI you can just copy the codemirror-ui directory into your web app. It includes a version of CodeMirror, or you can use your own version if you'd prefer.

Then include a link to the stylesheet and javascript files in your document. Something like this:

// First the CodeMirror stuff
<script src="lib/CodeMirror-2.3/lib/codemirror.js" type="text/javascript"></script>
<script src="lib/CodeMirror-2.3/lib/util/searchcursor.js" type="text/javascript"></script>
<link rel="stylesheet" href="lib/CodeMirror-2.3/lib/codemirror.css">
<script src="lib/CodeMirror-2.3/mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="lib/CodeMirror-2.3/mode/javascript/javascript.css">

//Then the CodeMirrorUI stuff
<script src="js/codemirror-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/codemirror-ui.css" type="text/css" media="screen" />

Note: The find/replace functionality relies on the searchcursor add on.

From there you can create an editor as shown above. It is especially easy to replace any calls to "CodeMirror.fromTextArea(...)" with a "new CodeMirrorUI(...)".

Another example

This editor is enabled with a save button and the 'inline' search widget. You can pass a function as the 'saveCallback' option which will be called when the save button is clicked.

The button for the popup search widget has been removed, along with the button for 'reindent selection'.

// Here you see some JavaScript code. Mess around with it to get // acquainted with CodeMirror's features. // Press enter inside the object and your new line will be suitably // indented. var keyBindings = { enter: "newline-and-indent", tab: "reindent-selection", ctrl_z: "undo", ctrl_y: "redo", ctrl_backspace: "undo-for-safari (which blocks ctrl-z)", ctrl_bracket: "highlight-brackets", ctrl_shift_bracket: "jump-to-matching-bracket" }; // Press tab on the next line and the wrong indentation will be fixed. var regex = /foo|bar/i; function example(x) { // Local variables get a different colour than global ones. var y = 44.4; return x + y - z; }

The uiOptions param for the editor above looks like this:

var uiOptions = {
  path : 'js/',
  searchMode = 'inline',
  buttons : ['save','undo','redo','jump','reindent','about'],
  saveCallback : function(){ alert("Some saving goes here.  Probably AJAX or something fancy."); }
}

View the source of this page to see the actual code used to get these editors in action.

Find the code @ Github

https://github.com/jagthedrummer/codemirror-ui

Acknowledgements

Marijn Haverbeke - CodeMirror

Thanks to Marijn Haverbeke for creating and releasing CodeMirror in the first place. Whithout his excellent contribution to the community this project would have no reason to exist.

Mark James - Silk Icons

I used the Silk icon set from Mark James of famfamfam.com fame.

Versions

All version up to and including 0.0.7 are based on CodeMirror 1.

Versions 0.0.8 and newer are based on CodeMirror 2.

License

CodeMirror UI is provided under the MIT License. See the LICENSE file for full details.

Known Usage

The following sites/apps are using CodeMirrorUI. Please let me know if you'd like to be added to this list.

• aPeel

CodeMirrorUI is a production of OctoLabs