= 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 [http://www.dojotoolkit.org 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):

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

that´s it.

== Screenshot ==

[http://www.vonautomatisch.at/django/dojoeditor.jpg 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 [http://archive.dojotoolkit.org/ 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 `fieldset`s with a `class` of `wysiwyg`, and then finds any contained `textarea`s and gives them
a `dojoType="Editor2"` attribute. The value of `help_text` is unimportant and shows up as normal.