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.


5 response to "Django and TinyMce"

  1. 20 kenneth gonsalves

    i have installed everything as per instructions. I am able to browse to:
    http://127.0.0.1/media/js/tiny_mce/tiny_...
    and i see the javascript there. But when running the thing I get this error:
    Error Could not find the template function Tiny_MCE_default_getEditorTemplate. Any clues?

  2. 21 kenneth gonsalves

    ok, i put 'theme: "advanced"' in the textareas.js file and it worked perfectly. Sorry for the trouble

  3. 22 Socialist Software » Blog Archive » Dj

    [...] I keep coming up with things that I think Django should have built in, but then end up being super easy to implement with just a few lines of code in the model. The TinyMCE editor was a good example of this, and it happened again with what I call a server side file selector. [...]

  4. 23 Stephen Mitchell

    The admin js field did not work as described above. It seems that Django automaticaly inserts /media/ for you. Changing it to the following fixed that issue.
    js = ('js/tiny_mce/tiny_mce.js','js/tiny_mce/textareas.js'),

  5. 1190 rvegnuduhd

    d3CKPe <a href="http://zpspknpqovnh.com/">zpspknpqovnh</a>, [url=http://iringmhiytwf.com/]iringmhiytwf[/url], [link=http://udwdrjnzcpkx.com/]udwdrjnzcpkx[/link], http://nydelemfkgcj.com/

Post a comment