Django-tinymce in Django’s Admin App

In our previous post, we discussed Django-tinymce, a JavaScript WYSIWYG editor that converts an HTML textarea field into an editor instance.  Again, django-tinymce is a Django application that contains a widget that renders a form field as a TinyMCE editor. This is especially helpful when you have forms that require rich text editing.

But what about the admin panel? Can you have TinyMCE there, too?

In this post, we will discuss using TinyMCE in Django admin.

1. Get TinyMCE (if you haven’t yet, then see the previous post on django-tinymce).

2. Set your project to use the Django admin application.

3. Once you have both, go to your templates directory and create a folder named ‘admin’. This is where your tinyMCE comes in.

4. Create a new HTML file, base_site.html inside the admin folder, and inside it, copy and paste the following code:

{% block title %}{{ title }} | {% endblock %}
{% block extrahead %}
<script type=”text/javascript” src=”/{{media_root}}/tiny_mce/tiny_mce.js”></script>
<script type=”text/javascript”>
tinyMCE.init({
// General options
mode : “textareas”,
theme : “advanced”,
plugins : “safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template”,
// Theme options
theme_advanced_buttons1 : “save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect”,
theme_advanced_buttons2 : “cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor”,
theme_advanced_buttons3 : “tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen”,
theme_advanced_buttons4 : “insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : true,
});
</script>
{% endblock %}
{% block branding %}
<h1 id=”site-name”></h1>
{% endblock %}
{% block nav-global %}{% endblock %}

As you can see from the code we have above, it is almost the same as when you put tinyMCE on any other HTML page in your project. What we did is that we replaced the default base_site.html of our admin app templates, and added our tinyMCE.

This is because (if you haven’t noticed already) TextFields in your django admin application are represented as <textarea></textarea> tags.