P3NK!N

If you need to add a WYSIWYG (What You See Is What You Get) editor to the admin section of your Django powered site it is really simple. I recently added TinyMCE and here you will see how I did it.

Download TinyMCE and copy the “tiny_mce” directory into the “media” directory of your project after you have extracted the files. Then create a Javascript file called “textarea.js” and add the following text into it and then place it in your “media” directory as well:

tinyMCE.init({
mode : “textareas”,
theme : “advanced”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_buttons1 : “fullscreen,preview,separator,cut,copy,paste,separator,undo,redo,separator,bold,italic,underline,strikethrough,sub,sup,separator,bullist,numlist,outdent,indent,link,unlink,anchor,separator,image,cleanup”,
theme_advanced_buttons2 : “formatselect,fontselect,fontsizeselect,separator,forecolor,backcolor,separator,help,separator,code”,
theme_advanced_buttons3 : “”,
auto_cleanup_word : true,
plugins : “table,advhr,advimage,advlink,preview,fullscreen”,
plugin_insertdate_dateFormat : “%d/%m/%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,preview,separator,cut,copy,paste,separator,undo,redo,separator,bold,italic,underline,strikethrough,sub,sup,separator,bullist,numlist,outdent,indent,link,unlink,anchor,separator,image,cleanup”,
theme_advanced_buttons2 : “formatselect,fontselect,fontsizeselect,separator,forecolor,backcolor,separator,help,separator,code”,
theme_advanced_buttons3 : “”
}
});

You can obviously change the settings as you need (the above are just the ones I used). The “mode” (line 2) above tells TinyMCE to replace all TextAreas with the TinyMCE editor. The next step is to inform Django to use the above script and the TinyMCE script. To do this open the model that you would like to use it in and add the following line to the Admin section of the Model:

class Admin:
js = (‘/locatoin/to/media/tiny_mce/tiny_mce.js’, ‘/location/to/media/textarea.js’,)

Now startup your server (python manage.py runserver), go to the admin section of your project (http://127.0.0.1:8000/admin/) and then go to the Model and create a new one and you should see the WYSIWYG editor staring you in the face