TinyMCE

Why TinyMCE? Some reasons are given in ​Django and TinyMCE and ​Using TinyMCE with Django's Admin. Try ​examples.

Warning: at present moment (11/26/2005) the Admin (formerly "The new admin") prefixes all js paths with /media/ - don't forget to take it into account when you decide where to put (or link) your JavaScript files. Ticket #914 is filed to resolve the issue.

There are several free WYSIWYG editors, which can be used with Django's admin pages. Some overview and first hand experience can be found ​here.

In order to use TinyMCE with Django you have to do three things:

1. Go to ​http://tinymce.moxiecode.com/ and download TinyMCE. Install it somewhere on your web server. It's better to serve it directly bypassing Django machinery. Optional: download TinyMCE compressor. You can use it, if your server supports PHP.

2. Create configuration file for TinyMCE. Below is my textareas.js file:

tinyMCE.init({
	mode : "textareas",
	theme : "advanced",
	//content_css : "/appmedia/blog/style.css",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_buttons1 : "fullscreen,separator,preview,separator,bold,italic,underline,strikethrough,separator,bullist,numlist,outdent,indent,separator,undo,redo,separator,link,unlink,anchor,separator,image,cleanup,help,separator,code",
	theme_advanced_buttons2 : "",
	theme_advanced_buttons3 : "",
	auto_cleanup_word : true,
	plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,fullscreen",
	plugin_insertdate_dateFormat : "%m/%d/%Y",
	plugin_insertdate_timeFormat : "%H:%M:%S",
	extended_valid_elements : "a[name|href|target=_blank|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
	fullscreen_settings : {
		theme_advanced_path_location : "top",
		theme_advanced_buttons1 : "fullscreen,separator,preview,separator,cut,copy,paste,separator,undo,redo,separator,search,replace,separator,code,separator,cleanup,separator,bold,italic,underline,strikethrough,separator,forecolor,backcolor,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,help",
		theme_advanced_buttons2 : "removeformat,styleselect,formatselect,fontselect,fontsizeselect,separator,bullist,numlist,outdent,indent,separator,link,unlink,anchor",
		theme_advanced_buttons3 : "sub,sup,separator,image,insertdate,inserttime,separator,tablecontrols,separator,hr,advhr,visualaid,separator,charmap,emotions,iespell,flash,separator,print"
	}
});

Mode "textareas" instructs TinyMCE to convert all textareas to WYSIWYG editors. I use the advanced theme, and practically all standard plugins, which don't require server support. In inline mode you have minimalistic toolbar with the most essential tools. When you switch to full-screen mode (tool's icon looks like a monitor), you have practically all tools available for advanced editing. You can look up all options in ​TinyMCE Documentation.

3. Add js option to admin sections of your model (excerpt from my model):

class Document(meta.Model):
    # model fields are here

    class META:
        admin = meta.Admin(
            # various admin options are here
            js = (
                '/tiny_mce/tiny_mce.js',
                '/appmedia/admin/js/textareas.js',
            ),
        )

Note that the above only works in Django 0.91 and older; for versions more recent than this, use the following as an example:

class Document(models.Model):
    # model fields are here
    
    class Admin:
        # various admin options are here
        js = (
                '/tiny_mce/tiny_mce.js',
                '/appmedia/admin/js/textareas.js',
            )

Basically js option includes tuple items as JavaScript files in the header of CRUD pages for this model (see ​Django Model Reference / Admin Options). The first script is the main TinyMCE file. If you use TinyMCE compressor, include '/tiny_mce/tiny_mce_gzip.php' instead. The second script is your configuration file created in step #2.

With newforms-admin

Add a media definition to a your ModelAdmin instance:

class MyModelOptions(admin.ModelAdmin):

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

admin.site.register(MyModel, MyModelOptions)

MEDIA_URL will be prepended to the above urls, so adjust your paths accordingly.

Using TinyMCE with flatpages (oldforms)

If you want to use TinyMCE in the admin's textarea for flatpages this thing is a little bit different because you don't have direct access to the model (unless you modify the contrib code which would cause difficulties when upgrading Django). So one way of doing this is to extend the flatpage's admin template.

To do so you need to:

• Create the directory <your_template_dir>/admin_copies/
• Copy <your_django_source>/contrib/admin/templates/admin/change_form.html to <your_template_dir>/admin_copies/ This is needed because you are going to extend it and can't access the admin template directly from your local template (acctually a symlink would work fine if you're working in some *nix)
• Create the directory <your_template_dir>/admin/flatpages/flatpage/
• Create a template in that directory called change_form.html that extends the original admin template

here's mine:

{% extends "admin_copies/change_form.html" %}
{% block extrahead %}{{ block.super }}
<script type="text/javascript" src="/site-media/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/site-media/js/tiny_mce/textareas.js"></script>
{% endblock %}

--NL

---

That's it.

Hints:

• Create your text using conventional WYSIWYG editor with all niceties (e.g., Word) and paste the result to TinyMCE.
• Go to HTML mode to see generated code. You can change it here to make it perfect.
• If you find problems while using certain tags in the editor (like all newlines between <pre> tags being substituted by </pre><pre>), just add to the file textareas.js the line remove_linebreaks : false, This problem arises because the option ​remove_linebreaks is enabled by default.
• If you want to enlarge the default textarea provided by django (and you don't want to wait for this ​http://code.djangoproject.com/ticket/2596) add an onpageload callback to your init call (​onpageload). Called after pageload but before tinymce initialisation so you can change textarea sizes in the callback.
• Alternatively you can change the default textarea size by using:

  tinyMCE.init({ 
          ... 
          width : "800",
          height : "500",