Version 13 (modified by 18 years ago) ( diff ) | ,
---|
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 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 ¶
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 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.