News & Blog

We’ve just rolled out TinyMCE to use with our Django Admin interface.

As we encountered several gotchas along the way, we felt it would be instructive to the community to illustrate the steps here, in true cookbook (aka “HowTo”) fashion.

Here we go…

The Cookbook

Step 1: Add your js to your Model’s Admin definition:

class MyBoffoModelAdmin (admin.ModelAdmin):
    fieldsets  = (
        ... yada yada yada...
        (None, {'classes': ['edit'], 'fields': ('content',)}),
    )
    class Media:
        js = ['/tiny_mce/tiny_mce.js', '/js/textareas.js']

Note:

• The classes : [‘edit’] which tells the code below to set the class for the mcEditor
• That after the standard include of tiny_mce.js, the second javascript reference in the js list, is your custom init code that you will be writing next.
• The nested “Class Media” tells the Django Admin interface to include the references to these .js files in the header of the Admin page.

Step 2: Write your initializer Javascript code:

This is the contents of /js/textarea.js:

function mce_setup()
{ tinymce.DOM.addClass (tinymce.DOM.select('.edit .vLargeTextField'), 'mcEdit');

  tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    editor_selector : "mcEdit",  // doesn't support selectors, only classes, despite the name
    height: "480",
    width: "90%",
    element_format : "html",
    plugins : "preview,fullscreen",
    theme_advanced_buttons3_add : "preview,fullscreen",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    //theme_advanced_resizing : true,
  });
};

Notes:

• This Javascript is executed in the header – and it does NOT initialize the editor yet, it merely defines a function to do so, which is called when the user clicks on a link, which we’ll see next.
• The “addClass” call at the top is necessary to work properly with Django – despite the ‘editor_selector’ setting in the tinyMCE.init paraeters, this does NOT accept a css selector, only a class – so we have to manually set up a new, unique class, using the tinymce.DOM.select call at the top.
• The selector of  “.edit .vLargeTextField” pinpoints the actual textarea under the fieldset with the “edit” css class.

Step 3: Add your HTML to the model:

We turn it on using the Django Model Fields’ help_text option, thusly:

content = models.TextField (blank=True, help_text='''HTML Content -
    <a href="javascript:mce_setup();">Click Here</a> to edit - see
    <a href="http://wiki.moxiecode.com/index.php/TinyMCE:Configuration">TinyMCE Configuration</a>
    for more options.''')

That’s it!

When you restart and load the page, you should see

“HTML Content – Click Here to edit – see TinyMCE Configuration for more options.”

at the bottom of the textarea in question that you set the ‘edit’ css class on –  and note that the other javascript isn’t loaded until you actually click on it, speeding load time of the page.

Clicking should quickly load the TinyMCE editor and buttons, resize the text area appropriately, render any HTML with WYSIWIG, and follow page resizes.

The Gotchas

1. Django doesn’t let you get at the actual textarea class, so you have to do the above selector
2. TinyMCE’s editor_selector parameter doesn’t use, or work with, selectors (!)
3. You could use the Django form id, but then this whle precedure wouldn’t be generic, you’d need one init js per field.
4. You would also need to set up the tinyMCE.init parameters to use ids rather than classes, too.
5. Setting  “theme_advanced_resizing : true” actually takes away functionality if you have setup up height and width as percentages – which accomplish the same thing with no extra js.
6. If you’re getting gibberish like “<br mce_bogus />” added to your empty text areas, there are a few things you can do – write us for details – you may need to set up an

   editor_deselector : "mcNoEdit"

7. and use the appropriate code to add the class at the top of the setup function:

   tinymce.DOM.addClass (tinymce.DOM.select('.vLargeTextField'), 'mcNoEdit');

Useful References

Django Admin Media – Using extra js & css with the Django Admin interface

TinyMCE API – Core API, DOM API including how to find elemnts by selector, and add a class

TinyMCE Examples – Examples with source code including click-to-load, dual/partial textareas, plugin activation, fullscreen, etc

Django Model Documentation – including the help_text option which allows HTML!

Honorable Mention

An Honorable Mention goes to the WYMeditor – an up-and-coming WYSIWYM editor – What You See Is What You Mean – and it’s been getting rave reviews.

It uses a class-based approach, which is intriguing and feel right – it just doesn’t have the polish and full feature set that TinyMCE does right now – but we’ll be exploring this further in a future post, as we’ve already implemented it for a client in Django Admin already :-), and it works well –

j