Add TinyMCE to a Django admin field

The Django's automatic administration generator is nice. With three lines, you have an interface to add, update and delete datas. However with textareas, it might be useful to have a more advanced editor.

So we're going to see here, how to implement TinyMCE to the textareas in a specific administration page. But this technic can also work with FCKEditor or any other WYSIWYG editor. All you have to do is put the appropriate javascript.

Let's our application's admin.py

from django.contrib import admin
from project.application.models import Page
class PageAdmin(admin.ModelAdmin):
    list_display = ('name', 'url')
    fieldsets = [
        (None, {'fields': ['name', 'url']}),
        ('Content', {'fields': ['content']}),
    ]
admin.site.register(Page, PageAdmin)

We define an admin interface for our model Page with the fields name, url and content. It's the last field that will be a TinyMCE field.

Let's start by adding external javascript files for this model. After fieldsets[], add :

class Media:
    js = (
        '/js/tiny_mce/tiny_mce.js',
        '/js/admin_pages.js'
    )

We include those two supplementary documents in the admin page for the model Pages. And only this one.

Install tinymce in the folder /js/. And create the file /js/admin_pages.js in which you'll put :

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

So you'll transform any textarea in this page to a TinyMCE field (in our case, there's only one). Restart your application and look at your nice text editor :)

You can now add any javascript to any admin page this way.

Add TinyMCE to a Django admin field

Comments

Post a New Comment