Django-tinymce: A WYSIWYG editor for Django

TinyMCE is a JavaScript WYSIWYG editor that converts an HTML textarea field into an editor instance. django-tinymce is a Django application that contains a widget that renders a form field as a TinyMCE editor.

Features of django-tinymce include:

– Using it as a form widget or with a view

– Integrate the TinyMCE spellchecker

Follow the tutorial below to integrate tinymce in django, to create richer forms for your web development needs. (Note: This tutorial shows you how to install and integrate tinyMCE using a virtual env for development. If you are developing projects in Django without using a virtual env, then this might not be the tutorial for you.)

Before you install:

-Make sure you have a version of Django that is 1.0 or higher (if you do not have Django installed, please install it).

1. Activate your virtualenv first, and then install django-tinymce using pip:

pip install django-tinymce

(also install django-staticfiles if needed)

2. Download a build of TinyMCE from If you’re developing with javascript using jQuery, downloading the jQuery package would be fine.)

3. Add tinymce to INSTALLED_APPS in for your project:


4. Go to your and add tinymce.urls to your project:

urlpatterns  = patterns(”,
(r’^tinymce/’, include(‘tinymce.urls’)),

This step isn’t required, though, so you may skip this step. 

5.  Copy the jscripts/tiny_mce directory from the tinyMCE distribution into a directory named js in your media root. (Or make sure it’s in a directory where you can access your JS files.)

The next steps are the basic usage for tinymce. Numbers with an asterisk * are steps to integrate tinyMCE differently. –

6. Include the tiny_mce.js file in your <head> tag, like this:

<script type = “text/javascript” src=”../jscripts/tiny_mce/tiny_mce.js”></script>

7. Render your form’s CharField into a textarea.

8. In your JS Script, initialize tinyMCE, like this:

<script type=”text/javascript”>

Note: You can customize tinyMCE’s buttons on its toolbar. Visit and read the documentation.

*6. Import tinyMCE in the views file that you’d like to use tinyMCE in:

from tinymce.widgets import TinyMCE

*7. Render your form’s CharField into a TinyMCE widget:

blog_post = CharField(widget= TinyMCE(attrs={‘cols’:100, ‘rows’: 80}))

*8. Make sure django-tinymce is  importing from django.forms.util. Check tinymce’s and make sure that it looks like:

from django.utils.encoding import smart_unicode

For more information about how to integrate tinyMCE, visit these pages:

Back to Blog