Add Dojo Editor

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

Unfortunately, multiple Editors on one site is currently not working with Editor2.

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", "Editor");
                                    // All features are enabled by default. For manual feature selection just uncomment next line.
				    //ht.previousSibling.previousSibling.setAttribute("items", "formatblock;|;insertunorderedlist;insertorderedlist;|;bold;italic;underline;strikethrough;|;createLink;");
				}
		}
	},
}

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

• no XHTML support
• doesn´t work with Safari
• multiple editors on one site doesn´t work with Editor2. You have to use Editor instead (using Editor, your are not able to set specific heights for different textareas).

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.

Alternative version

Another way to do this is to use the fieldset support in the Admin interface, and set the CSS class for the fieldset to wysiwyg; see ​http://www.djangoproject.com/documentation/model_api/#classes for more details on how to do this. Then use this version of AddRichTextEditing.js:

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 fieldsets = document.getElementsByTagName('fieldset');
        for (var i = 0, fs; fs = fieldsets[i]; i++) {
            var classes = fs.className || fs.getAttribute("class");
            if ( (classes) && (classes.indexOf) && (classes.indexOf("wysiwyg") != -1) ) {
                var textareas = fs.getElementsByTagName('textarea');
                for (var j = 0, ta; ta = textareas[j]; j++) {
                    ta.setAttribute("dojoType", "Editor2");
                }
            }
        }
    },
}

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

This looks for all fieldsets with a class of wysiwyg, and then finds any contained textareas and gives them a dojoType="Editor2" attribute. The value of help_text is unimportant and shows up as normal.