django for dummies

Django-admin +Filebrowser +TinyMCE –Grappelli made easy

First of all you have to follow the instruction here.

After that, download the source code of tinyMCE, unzip, grab the ‘tiny_mce’ folder, inside the ‘jscripts’ folder, and put it in the media folder of your project. Ex.:

$ unzip tinymce_3_*.zip
$ cp -r tinymce/jscripts/tiny_mce your_media_project_path/tiny_mce

To turn on the wysiwyg on the admin page you need to include the main tiny_mce javascript file and the javascript that convert the textareas on the admin page.
It’ really simple. Open your admin model and add the Meta class with js paths. Ex: of your app
from yourproject.yourapp.models import YourModel
from django.contrib import admin
from django.conf import settings

class YourModelAdmin(admin.ModelAdmin):
    class Media:
        js = (settings.MEDIA_URL+'tiny_mce/tiny_mce_src.js',

Now you can put whatever you want on your contents!

Django + Filebrowser – Grappelli

So, you want a content management system on your site and you’re thinking about Django. Yes. Maybe You’re right, but what happen if you want include files and images on your admin edited pages? You have only few real options.

First, I want consider django-adminfiles, because it remainds me my first approch with my first admin/backend PHP powered. I feel it’s far away to be production ready. Most of all, because you haven’t a file preview, especially with the images where, unfortunately, you haven’t a resizing choices.

So, go ahead and  trying 1st google position django-filebrowser.  Really nice work, but it requires Grappelli?! Yes, grappelli has a nice interface and it has good features (eg. bookmarks), but you can’t force anyone to use that for filebrowser! So, just trying to find an escamotage.

Why filebrowser doesn’t work well with the default django admin? Because its templates require some blocks and some javascript (jQuery) not included in the default admin. So, if you want to manually fix the problem you have to change the blocks in all the template files:


{% block stylesheets %}


{% block extrastyle %}

and from:

{% block javascripts %}


{% block extrahead %}

Finally you have to add jQuery on the javascript block:

{% block javascripts %}
{{ block.super }}
<script type=”text/javascript” src=”../../jsi18n/”></script>
<script type=”text/javascript” src=”{% admin_media_prefix %}js/core.js”></script>
<!-- add the line below -->
<script type=”text/javascript” src=”{{ settings_var.URL_FILEBROWSER_MEDIA }}uploadify/jquery-1.3.2.min.js”></script>

From django 1.2, you can skip the last step because jquery is included by default into the admin header.

… or …

you can skip all of this!

I found a fork, django-filebrowser-no-grappelli, but isn’t updated so doesn’t work fine with the image versioning, fixed on the main project. Fortunately its templates work and the simplest thing we can do is changing the main repository templates folder with the the forked one.


$ svn checkout svn checkout django-filebrowser

$ git clone git:// django-filebrowser-no-grappelli

$ cp -r django-filebrowser-no-grappelli/filebrowser/templates django-filebrowser/filebrowser/templates

That’s all. Copy django-filebrowser folder to your local site-packages or in your project path and follow the install and setup istructions.
If you don’t specifing the default folders, you have to create default folders in your project media folder:

$ mkdir yourprojectpath/media/uploads
$ mkdir yourprojectpath/media/_versions_

Have fun! -> http://localhost:8000/admin/filebrowser/browse