Skip to content

Instantly share code, notes, and snippets.

@tomgruner
Forked from uhop/admin.py
Created January 11, 2012 16:39
Show Gist options
  • Save tomgruner/1595530 to your computer and use it in GitHub Desktop.
Save tomgruner/1595530 to your computer and use it in GitHub Desktop.
Adding Dojo's rich editor with minimal plugins to Django's Admin that shows the editor on click and hides on blur
# 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("dijit._editor.plugins.LinkDialog");
dojo.require("dojox.editor.plugins.ShowBlockNodes");
dojo.require("dijit._editor.plugins.ViewSource");
dojo.require("dojox.editor.plugins.InsertEntity");
// headless plugins
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");
dojo.forEach(textareas, function(textarea) {
//Create the editor on click
dojo.connect(textarea, 'click', function (event) {
dojo.style(textarea, {'display' : 'none'});
var editor_div = dojo.create('div');
dojo.place(editor_div, textarea, 'after');
dojo.style(editor_div, {
height : '340px',
width : '610px',
'float' : 'left',});
var editor = new dijit.Editor({
styleSheets: "/static/css/roadmap.css",
plugins: [
"bold", "italic", "underline", "strikethrough", "|",
"insertOrderedList", "insertUnorderedList",
"formatBlock", "createLink", "|", "viewsource",
// headless plugins
"normalizeindentoutdent", "prettyprint",
"autourllink", "dijit._editor.plugins.EnterKeyHandling"
],
onBlur: function (event) {
textarea.value = this.get('value');
//Destroy the editor on blur
editor_div.parentNode.removeChild(editor_div);
dojo.style(textarea, {'display' : 'block'});
this.destroyRecursive();
}
}, editor_div);
editor.onLoadDeferred.then(function () {
editor.set('value', textarea.value);
editor.focus();
})
});
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment