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.

Le générateur automatique d’administration de Django est super sympa. En trois lignes de code, vous avez une interface pour ajouter, modifier et supprimer des données de votre modèle.
Cependant dans le cas de textareas, il peut arriver d’avoir besoin d’avoir un éditeur de texte avancé.

Nous allons donc ici voir comment implémenter TinyMCE aux textareas d’une page de l’administration particulière.
Mais cette technique peut également très bien fonctionne avec FCKEditor ou tout autre éditeur WYSIWYG. Le tout est, après, de changer le code javascript.

Prenons le fichier admin.py de notre application :
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)

Nous définissons donc une interface d’administration pour notre modèle Page qui contient les champs name, url et contenu.
Ce dernier champ est celui qui va prendre un textarea.

Commencons par ajouter des documents javascript externes spécifiquement pour ce modèle.
Après fieldsets[], ajouter
class Media:
  js = (
    '/js/tiny_mce/tiny_mce.js',
    '/js/admin_pages.js'
  )

Nous incluons donc les deux documents javascript supplémentaires dans la page des pages. Et uniquement celle-ci.

Installez tinymce dans /js/. Et créer le fichier /js/admin_pages.js
Dans lequel vous placerez
tinyMCE.init({
  mode : 'textareas',
  theme : "simple"
});

Ainsi, vous transformez tous les textareas de la page en champs tinymce (mais dans notre cas, il s’agit d’un seul).
Redémarrez votre application et vous verrez votre bel éditeur de texte enrichi :)

Libre à vous par la suite d’enrichir votre administration avec du javascript de cette manière.

 
Fork me on GitHub