= 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", "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):

{{{
#!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].