Skip to content

Instantly share code, notes, and snippets.

@uhop
Created March 14, 2011 00:31
  • Star 9 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save uhop/868595 to your computer and use it in GitHub Desktop.
Adding Dojo's rich editor to Django's Admin.
# 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
/* 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;}
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"
]
});
}
});
@uhop
Copy link
Author

uhop commented Mar 14, 2011

@tomgruner
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment