= Add Dojo Editor =
This document describes how to add the Dojo Rich Text Editor (Editor2) to the Django Admin-Interface.
== 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('');
document.write('');
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 ==
* doesn´t work with Safari
* having multiple Editors on one site needs proper testing (especially if you want to share the toolbar)
== 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].