= 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 [http://www.djangoproject.com/documentation/model_api/#js `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 [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 [http://www.mycaal.com/ loan modification] 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.