Skip to content

Using TinyMCE in Django

May 25, 2012

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:

About these ads

From → Django

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: