Add Dojo Editor

This document describes how to add the Dojo Rich Text Editor (Editor2) to the Django Admin-Interface.

Install Dojo

Download ​Dojo (kitchen sink) and install it on your webserver in /media/dojo/...

Add the javascript for loading the Editor

Save the following script as AddRichTextEditing.js into /media/js/admin/

document.write('<script type="text/javascript" src="/media/dojo/dojo.js"></script>');
document.write('<script type="text/javascript">dojo.require("dojo.widget.Editor2");</script>');

var AddEditor = {
	init: function() {
		var helptext = document.getElementsByTagName('p');
		for (var i = 0, ht; ht = helptext[i]; i++) {
				if (ht.firstChild.data == "Rich Text Editing.") {
				    ht.previousSibling.previousSibling.setAttribute("dojoType", "Editor2");
				}
		}
	},
}

addEvent(window, 'load', AddEditor.init);

This script looks for the help text "Rich Text Editing." and replaces the associated textarea with the Dojo-Editor. I´m using Editor2, because it´s loading much faster than Editor.

Define the models

Define your model like this (if you change the help_text make sure to change it in AddRichTextEditing.js also):

body = models.TextField('Body', help_text='Rich Text Editing.', blank=True, null=True)
...
class Admin:
     js = ['js/admin/AddRichTextEditing.js']

that´s it.

Screenshot

​Screenshot (Preview)

Some restrictions

• doesn´t work with Safari
• having multiple Editors on one site needs proper testing (especially if you want to share the toolbar)

Hints

• Usually, the area for Rich Text Editing stretches vertically when adding content - if you want to have a scrollbar instead, set the "height" in /src/widget/RichText.js or add ht.previousSibling.previousSibling.setAttribute("height", "500px"); to the above script.
• You may want to change the styles in order to integrate the RTE: use /src/widget/templates/HtmlEditorToolbar.css - be aware that these styles may clash with the django-styles.

Help

• some examples can be found in the ​Dojo Nightly builds.