Add Dojo Editor

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

Warnings

According to #1099, the ​`admin.js` option will be going away in favor of overriding admin templates, so this approach will have to be modified somewhat when that happens.

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.