Nov 23

Using CodeMirror with Django Admin

Using a code editor in Django's admin

Having gotten a little experience using CodeMirror, I believe I made the right choice. CodeMirror does not use regex for syntax highlighting. It implements an actual code parser. This makes more powerful, but also slower, than regex solutions. The speed, of course, will depend upon your browser's Javascript implementation.

Integration with Django's Admin is not difficult, with a little help from jQuery. For this example, you will need to download the CodeMirror and jQuery source.

Extract the CodeMirror source. The archive will contain a css and a js directory. Place these in the media directory of your app. In this example, I placed the contents of the css directory in media/css/codemirror/ and the js directory in media/js/codemirror/. Install jQuery in media/js/jQuery/. This example assumes that you have MEDIA_ROOT and MEDIA_URL properly configured in settings.py.

Add a Media class tor your model's ModelAdmin class:

class Post(ModelAdmin):
class Media:
js = ('js/jquery/jquery.js',
'js/codemirror/codemirror.js',
'js/codemirror_config.js',)

Note the last line references codemirror_config.js. You will be creating this file. I have mine placed mine in media/js/. Here is the contents of that file:

$(document).ready(function() {
var editor = new CodeMirror.fromTextArea("id_content", {
width: "90%",
height: "500px",
parserfile: ["parsexml.js", "parsecss.js", "tokenizejavascript.js",
"parsejavascript.js", "parsehtmlmixed.js"],
stylesheet: ["/media/css/codemirror/xmlcolors.css",
"/media/css/codemirror/jscolors.css",
"/media/css/codemirror/csscolors.css"],
path: "/media/js/codemirror/",
content: document.getElementById("id_content").value
});

$("textarea#id_content + iframe").css("border", "1px solid rgb(204, 204, 204)");
});

This example assumes that you are replacing a textbox for a field named content.

  • The parserfile parameter specifies that this editor will enable mixed syntax highlighting. It will properly parse HTML interspersed with CSS and JavaScript. If you do not need mixed parsing, you should enable only those parsers that are necessary. This will speed up the editor's display.
  • The stylesheet parameter pulls in the CSS files which correspond to the parsers you have enabled. Note the path. This must match your media URL configuration. The example above will work with Django's defaults.
  • You may wish to experiment with various values for width and height. By setting a percentage for width, you may end up truncating the scroll bar if your browser window is not wide enough. This parameter can accept any CSS measurement. 
  • You must specify a path parameter. This is the location where the script will find the parser files and tokenizers.
  • Finally, the content parameter is a standard DOM fetch of the text box contents which we are replacing. If you do not do this, the resulting CodeMirror editor will be empty, which is obviously not what you want.

The CodeMirror editor should now work. It is implemented as an <iframe>, which will replace the textbox which you specified. However, by default, the <iframe> has no visible border, because it is assumed that you will wrap the <iframe> in a <div>. As we do not wish to employ ugly hacks in the Admin, this is not an option. You could, of course edit the codemirror.js file and locate the border property. However, since we are already using jQuery, we can easily select the iframe using a jQuery selector, and modify the border style property to match what is used in the Django Admin.

About

I'm a Lutheran pastor, a CTO, a father, amateur photographer, programmer, Irish music fan, and all around geek, but I only have one blog. So, you will find here a mix of theology, photography, geek speak, family news, and whatever else strikes my fancy. If you get confused, there are now categories…

Subscribe

Categories

Elsewhere

Recent Posts

Archive

BlogRoll