Using TinyMCE in Django

Inside your virtual environment, install django-tinymce

pip install django-tinymce

Inside your media root, create a new directory and name it “js”. Copy the tiny_mce directory under lib/python2.7/site-packages/tinymce/media and put it there.

If you want to use any of the views add tinymce your installed applications list and URLconf:

settings.py

INSTALLED_APPS = (
    ...
    'tinymce',
    ...
)

urls.py

urlpatterns = patterns('',
    ...
    (r'^tinymce/', include('tinymce.urls')),
    ...
)

The following are the implementation for the models, views and templates:

models.py

from django.db import models

# Create your models here.
class Session(models.Model):
    ...
    content = models.TextField()
    ...

forms.py

from django import forms
from session_app.models import Session

class SessionForm(forms.ModelForm):
    class Meta:
        model = Session

views.py

from session_app.forms import SessionForm
from django.template import RequestContext
from django.shortcuts import render_to_response, get_object_or_404
from django.contrib.auth.decorators import login_required

@login_required()
def create(request):
    form = SessionForm()
    return render_to_response('session/edit.html', {
        'form': form,
    }, context_instance=RequestContext(request))

session/edit.html

{% extends "site-base.html" %}

{% block inline-scripts %}
    <script type="text/javascript" src="{{ MEDIA_URL }}js/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript" src="{% url tinymce-js "advanced" %}"></script>
{% endblock inline-scripts %}

{% block content %}
    <form action="" method="post">
        {% csrf_token %}
        {{ form.as_p }}

        <input type="submit" value="Submit" />
    </form>

    <p>{{ session.views }} views</p>
{% endblock content %}

If you cannot or will not change the widget on a form you can also use the tinymce-js named view to convert some or all textfields on a page to TinyMCE editors. On the template of the page, add the following lines to the HEAD element:

<script type="text/javascript" src="{{ MEDIA_URL }}js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="{% url tinymce-js "NAME" %}"></script>

The NAME argument allows you to create multiple TinyMCE configurations. Now create a template containing the Javascript initialization code. It should be placed in the template path as NAME/tinymce_textareas.js or tinymce/NAME_textareas.js.

Example:

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    plugins : "autolink,lists,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,wordcount,advlist,autosave,visualblocks",

    theme_advanced_buttons1 : "bold,italic,underline,separator,justifyleft,justifycenter,justifyright, separator,formatselect",
    theme_advanced_buttons2 : "hr,separator,bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,link,cleanup,code,separator,print,",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    //theme_advanced_statusbar_location : "bottom",
    width: "450",
    height: "600",
    language: "{{ language }}",
});

This example also shows the variables you can use in the template. The language variables are based on the current Django language. If the content language is different from the interface language use the tinymce-js-lang view which takes a language (LANG_CODE) argument:

<script type="text/javascript" src="{% url tinymce-js-lang "NAME","LANG_CODE" %}"></script>

References:

Leave a Reply