Skip to main content

A Django model field and widget that renders a customizable WYSIWYG/rich text editor

Project description

Latest Version

A Django model field and widget that renders a customizable rich text/WYSIWYG widget. Tested with TinyMCE and CKEditor. Designed to be easily extended to use other editors.


Install django-richtextfield and add it to your Django project’s INSTALLED_APPS, django.contrib.admin must also be in INSTALLED_APPS:


Add the urls to the project’s urlpatterns:

url(r'^djrichtextfield/', include('djrichtextfield.urls'))

Configure django-richtextfield in

    'js': ['//'],
    'init_template': 'djrichtextfield/init/tinymce.js',
    'settings': {
        'menubar': False,
        'plugins': 'link image',
        'toolbar': 'bold italic | link image | removeformat',
        'width': 700

Now you’re ready to use the field in your models:

from djrichtextfield.models import RichTextField

class Post(models.Model):
    content = RichTextField()

or forms:

from djrichtextfield.widgets import RichTextWidget

class CommentForm(forms.ModelForm):
    content = forms.CharField(widget=RichTextWidget())


Define the DJRICHTEXTFIELD_CONFIG dictionary in your project settings. This dictionary can have the following keys:


A list of required javascript files. These can be URLs to a CDN or paths relative to your STATIC_URL e.g.:

'js': ['//']


'js': ['path/to/editor.js', 'path/to/plugin.js']

Path to the init template for your editor. Currently django-richtextfield ships with two templates, either:

'init_template': 'djrichtextfield/init/tinymce.js'


'init_template': 'djrichtextfield/init/ckeditor.js'

A Python dictionary with the default configuration data for your editor e.g.:

{  # TinyMCE
    'menubar': False,
    'plugins': 'link image',
    'toolbar': 'bold italic | link image | removeformat',
    'width': 700


{  # CKEditor
    'toolbar': [
        {'items': ['Format', '-', 'Bold', 'Italic', '-',
        {'items': ['Link', 'Unlink', 'Image', 'Table']},
        {'items': ['Source']}
    'format_tags': 'p;h1;h2;h3',
    'width': 700

This is an optional configuration key. Profiles are “named” custom settings used to configure specific type of fields. You can configure profiles like this:

'profiles': {
    'basic': {
        'toolbar': 'bold italic | removeformat'
    'advanced': {
        'plugins': 'link image table code',
        'toolbar': 'formatselect | bold italic | removeformat |'
                   ' link unlink image table | code'


A profile is treated the same way as directly defined field & widget settings. This means that profile settings are merged with the defaults!

Field & Widget settings

You can override the default settings per field:

class CommentForm(forms.ModelForm):
    content = forms.CharField(widget=RichTextWidget())
    content.widget.field_settings = {'your': 'custom', 'settings': True}


class Post(models.Model):
    content = RichTextField(field_settings={'your': 'custom', 'settings': True})

It’s recommended to use profiles, they make it easier to switch configs or even editors on a later date. You use a profile like this:

class CommentForm(forms.ModelForm):
    content = forms.CharField(widget=RichTextWidget(field_settings='basic'))


class Post(models.Model):
    content = RichTextField(field_settings='advanced')


Fields always inherit the default settings, customs settings and profiles are merged with the defaults!

Custom init / Using another editor

This is uncharted territory, but in theory it’s fairly easy. Just configure DJRICHTEXTFIELD_CONFIG to load the right Javascript files and create an init template.

    'js': ['path/to/editor.js'],
    'init_template': 'path/to/init/template.js',
    'settings': {'some': 'configuration'}

Init template

The init template is a Django template (so it should be in the template and not in the static directory). It contains a tiny bit of Javascript that’s called to initialize each editor. For example, the init template for CKEditor looks like this:

if (!CKEDITOR.instances[id]) {
    CKEDITOR.replace(id, settings);

The init template has the following Javascript variables available from the outer scope:

jQuery wrapped textarea to be replaced
The id attribute of the textarea
DJRICHTEXTFIELD_CONFIG['settings'] as a JS object
The field_settings as a JS object
Merge of default_settings and custom_settings

Handling uploads & other advanced features

django-richtextfield built to be editor agnostic. This means that it’s up to you to handle file uploads, show content previews and support other “advanced” features.


1.2.1 (2018-01-18)

  • Add [‘admin/js/vendor/jquery/jquery.min.js’, ‘admin/js/jquery.init.js’] to This makes the widget usable outside of the admin (but still requires django.contrib.admin to be in INSTALLED_APPS) and prevents javascript errors inside the admin in certain edge cases.

1.2 (2017-12-04)

  • Remove support for Django < 1.11
  • Add support for Django 2.0

1.1 (2016-01-14)

  • Remove support for Django < 1.8
  • Tested with Django 1.8 & Django 1.9

1.0.1 (2014-11-13)

  • Fix unicode error

1.0 (2014-09-30)

  • First release

Project details

Release history Release notifications

This version
History Node


History Node


History Node


History Node


History Node


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Filename, size & hash SHA256 hash help File type Python version Upload date
django-richtextfield-1.2.1.tar.gz (13.8 kB) Copy SHA256 hash SHA256 Source None Jan 18, 2018

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging CloudAMQP CloudAMQP RabbitMQ AWS AWS Cloud computing Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page