Adding Dojo's rich editor with minimal plugins to Django's Admin that shows the editor on click and hides on blur

admin.py

# Example how to add rich editor capabilities to your models in admin.

from django.contrib.admin import site, ModelAdmin

import models

# we define our resources to add to admin pages
class CommonMedia:
  js = (
    'https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js',
    '/appmedia/admin/js/editor.js',
  )
  css = {
    'all': ('/appmedia/admin/css/editor.css',),
  }

# let's add it to this model
site.register(models.Category,
  list_display  = ('full_name',),
  search_fields = ['full_name',],
  Media = CommonMedia,
)

# ... and so on

editor.css

/* Import standard Dojo CSS files */
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/claro/claro.css";

/* Import custom style sheets for plugins */
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/FindReplace.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/ShowBlockNodes.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/InsertEntity.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/CollapsibleToolbar.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/Blockquote.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/PasteFromWord.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/InsertAnchor.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/TextColor.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/SpellCheck.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/PasteFromWord.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/PasteFromWord.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/PasteFromWord.css";

/* update CSS rules to cater for Django Admin */
.dijitEditor {display: inline-block;}
.dijitEditor .dijitToolbar .dijitTextBox {width: 20ex;}
.dijitEditor .dijitToolbar label {display: inline; float: none; width: auto;}

editor.js

dojo.require("dijit.Editor");

// extra plugins
dojo.require("dijit._editor.plugins.FontChoice");
dojo.require("dijit._editor.plugins.LinkDialog");
dojo.require("dojox.editor.plugins.ShowBlockNodes");
dojo.require("dijit._editor.plugins.ViewSource");
dojo.require("dojox.editor.plugins.InsertEntity");

// headless plugins
dojo.require("dojox.editor.plugins.NormalizeIndentOutdent");
dojo.require("dojox.editor.plugins.PrettyPrint"); // let's pretty-print our HTML
dojo.require("dojox.editor.plugins.AutoUrlLink");
dojo.require("dojox.editor.plugins.ToolbarLineBreak");

dojo.ready(function(){
  var textareas = dojo.query("textarea");
  if(textareas && textareas.length){
    dojo.addClass(dojo.body(), "claro");
    dojo.forEach(textareas, function(textarea) {
            
        //Create the editor on click
    	dojo.connect(textarea, 'click', function (event) {
    	
    		dojo.style(textarea, {'display' : 'none'});
    			
    	    var editor_div = dojo.create('div');
    	    dojo.place(editor_div, textarea, 'after');
    	 	dojo.style(editor_div, {
    	 	 				 height	: '340px',
    	 	 				 width  : '610px',
    	 					 'float'	: 'left',});
    	 	
    	 
    	 					 
       		var editor = new dijit.Editor({
		      styleSheets: "/static/css/roadmap.css",
		      plugins: [
		        
		        "bold", "italic", "underline", "strikethrough", "|",
		        "insertOrderedList", "insertUnorderedList",  
		        "formatBlock", "createLink",  "|", "viewsource",
		        // headless plugins
		        "normalizeindentoutdent", "prettyprint",
		        "autourllink", "dijit._editor.plugins.EnterKeyHandling"
		      ],
		      onBlur: function (event) {
		      	textarea.value = this.get('value');
		      	//Destroy the editor on blur
		      	editor_div.parentNode.removeChild(editor_div);
		      	dojo.style(textarea, {'display' : 'block'});
		      	this.destroyRecursive();
		      }
		    }, editor_div);
		    
			editor.onLoadDeferred.then(function () {
				editor.set('value', textarea.value);
				editor.focus();
			})
    	});
    });
  }
});