public
Last active

Adding Dojo's rich editor to Django's Admin.

  • Download Gist
admin.py
Python
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
# Example how to add rich editor capabilities to your models in admin.
 
from django.contrib.admin import site, ModelAdmin
 
import models
 
# we define our resources to add to admin pages
class CommonMedia:
js = (
'https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js',
'/appmedia/admin/js/editor.js',
)
css = {
'all': ('/appmedia/admin/css/editor.css',),
}
 
# let's add it to this model
site.register(models.Category,
list_display = ('full_name',),
search_fields = ['full_name',],
Media = CommonMedia,
)
 
# ... and so on
editor.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
/* Import standard Dojo CSS files */
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/claro/claro.css";
 
/* Import custom style sheets for plugins */
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/FindReplace.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/ShowBlockNodes.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/InsertEntity.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/CollapsibleToolbar.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/Blockquote.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/PasteFromWord.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/InsertAnchor.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/TextColor.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/SpellCheck.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/PasteFromWord.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/PasteFromWord.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojox/editor/plugins/resources/css/PasteFromWord.css";
 
/* update CSS rules to cater for Django Admin */
.dijitEditor {display: inline-block;}
.dijitEditor .dijitToolbar .dijitTextBox {width: 20ex;}
.dijitEditor .dijitToolbar label {display: inline; float: none; width: auto;}
editor.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
dojo.require("dijit.Editor");
 
// extra plugins
dojo.require("dijit._editor.plugins.FontChoice");
dojo.require("dojox.editor.plugins.TextColor");
dojo.require("dojox.editor.plugins.Blockquote");
dojo.require("dijit._editor.plugins.LinkDialog");
dojo.require("dojox.editor.plugins.InsertAnchor");
dojo.require("dojox.editor.plugins.FindReplace");
dojo.require("dojox.editor.plugins.ShowBlockNodes");
dojo.require("dojox.editor.plugins.PasteFromWord");
dojo.require("dijit._editor.plugins.ViewSource");
dojo.require("dijit._editor.plugins.FullScreen");
dojo.require("dojox.editor.plugins.InsertEntity");
 
// headless plugins
dojo.require("dojox.editor.plugins.CollapsibleToolbar");
dojo.require("dojox.editor.plugins.NormalizeIndentOutdent");
dojo.require("dojox.editor.plugins.PrettyPrint"); // let's pretty-print our HTML
dojo.require("dojox.editor.plugins.AutoUrlLink");
dojo.require("dojox.editor.plugins.ToolbarLineBreak");
 
dojo.ready(function(){
var textareas = dojo.query("textarea");
if(textareas && textareas.length){
dojo.addClass(dojo.body(), "claro");
textareas.instantiate(dijit.Editor, {
styleSheets: "/appmedia/style.css;/appmedia/blog/style.css",
plugins: [
"collapsibletoolbar",
"fullscreen", "viewsource", "|",
"undo", "redo", "|",
"cut", "copy", "paste", "|",
"bold", "italic", "underline", "strikethrough", "|",
"insertOrderedList", "insertUnorderedList", "indent", "outdent", "||",
"formatBlock", "fontName", "fontSize", "||",
"findreplace", "insertEntity", "blockquote", "|",
"createLink", "insertImage", "insertanchor", "|",
"foreColor", "hiliteColor", "|",
"showblocknodes", "pastefromword",
// headless plugins
"normalizeindentoutdent", "prettyprint",
"autourllink", "dijit._editor.plugins.EnterKeyHandling"
]
});
}
});

Thanks for this great snippet!

I made another version of it that shows the editor on demand when the text is clicked, then destroys the editor on blur. It is useful if you have a lot of text areas to keep the page loading quick.

You can find it here:
https://gist.github.com/1595530

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.