Django and TinyMce

I have been experimenting with the Django web framework for the past few days and it is great. It is easy to learn, and what it produces from the amount of code you input is staggaring.

One thing I did find lacking was lack of a wysisyg input field. meta.TextField works great but sometimes users need a little more. At first I wanted to create a meta.HtmlField but after some more thought you can achieve the same results with a meta.TextField and the admin.js param.

Before I get into the code here is a screenshot of what we will achieve. Django with TinyMce

Here's how:

First you will need to download the TinyMce code from http://tinymce.moxiecode.com/download.php Extract that to somewhere on your system. I used /Users/jay/Sites/javascript

Next you will need to link the TinyMce code into the Django media directory

ln -s /Users/jay/javascript/tinymce/jscripts/tiny_mce /Users/jay/python/django/trunk/django/conf/admin_media/js/tiny_mce

Your django may be in another dir.

To test that the tiny_mce is in the correct place, fire up the django server

djang-admin.py runserver --settings=myproject.settings.admin
and browse to http://127.0.0.1/media/js/tiny_mce/tiny_mce.js If you see a javascript file the you are on the right track.

Now create a textareas.js file in the tiny_mce dir and fill it with this.

tinyMCE.init({
	mode : "textareas",
        theme : "default"
});

Now we need to edit the model that we want to use TinyMce.

fields = (
        meta.CharField('title','title',maxlength=200),
        meta.TextField('description','description'),
        meta.CharField('location','location',maxlength=200)
    )
    
    admin = meta.Admin(
    		fields = (
    			(None, {'fields': ('title','description','location')}),
    		),
            js = ('/media/js/tiny_mce/tiny_mce.js','/media/js/tiny_mce/textareas.js'),
    )

Notice the "js" param in the admin section. This tells Django to load those javascript files on the add/edit page for this model.

If you have done all this correctly you should see the TinyMce editor for all the meta.TextField's in your model.

For more info on TinyMce, including how to tailor it to your needs go to http://tinymce.moxiecode.com/

Some people may not want to use TinyMce, but the same principals should apply to many wysiwyg editors. I may do another howto using the xinha editor, since someone has aked for that.





Powered by Django.