Django TinyMCE

5.0.0 · active · verified Mon Apr 13

django-tinymce is a Django application that provides a widget to easily integrate the TinyMCE rich text editor into Django forms and models. It allows for highly customizable WYSIWYG editing experiences within Django projects, including the admin interface. The library is actively maintained with regular updates to support newer TinyMCE and Django versions.

Warnings

breaking Version 4.0.0 upgraded TinyMCE from v5 to v6. The `spellchecker` plugin was removed; use the `browser_spellcheck` TinyMCE option instead. This requires configuration changes in `TINYMCE_DEFAULT_CONFIG`.
Fix: Remove `spellchecker` from TinyMCE plugins in `TINYMCE_DEFAULT_CONFIG`. Set `'browser_spellcheck': True` instead.
breaking Following the TinyMCE 6 upgrade in v4.0.0, version 4.1.0 further addressed renamed toolbar elements and removed buttons from premium plugins, potentially breaking existing toolbar configurations.
Fix: Review and update `toolbar` and `plugins` settings in `TINYMCE_DEFAULT_CONFIG` according to TinyMCE 6 documentation and `django-tinymce` release notes.
breaking Version 3.1.0 removed the jQuery dependency. Consequently, the `TINYMCE_INCLUDE_JQUERY` setting was also removed.
Fix: Remove `TINYMCE_INCLUDE_JQUERY` from your `settings.py`. Ensure your project handles jQuery dependencies separately if still needed for other parts of your application.
breaking Version 3.5.0 dropped support for older Python and Django versions. Specifically, Python 3.6 and Django 3.0, 3.1 are no longer supported.
Fix: Ensure your project runs on Python >= 3.7 and Django >= 3.2 to use `django-tinymce` v3.5.0 and newer versions.
gotcha TinyMCE editor may not display correctly (e.g., no toolbar, basic textarea) if `TINYMCE_JS_URL` is incorrect or if static files are not served properly.
Fix: Verify that `TINYMCE_JS_URL` in `settings.py` points to the correct `tinymce.min.js` file (either self-hosted in your static files or a CDN). Ensure Django's static files configuration is correct and that `{{ form.media }}` is included in your template's `<head>` section.
gotcha Content edited in TinyMCE might not be saved on form submission, particularly in complex forms or when using custom JavaScript to handle submission.
Fix: Before submitting the form, ensure that `tinyMCE.triggerSave()` is called. This forces TinyMCE instances to update their corresponding `<textarea>` elements, making their content available for Django to process.

Install

pip install django-tinymce Install with pip

Imports

TinyMCE
```
from tinymce.widgets import TinyMCE
```
Use this for form fields in `forms.py` or `admin.py` to apply the TinyMCE widget.
HTMLField
```
from tinymce.models import HTMLField
```
Use this as a model field type in `models.py` for content that requires rich text editing.
RichTextUploadingField
```
from ckeditor_uploader.fields import RichTextUploadingField
```
This field is part of `django-ckeditor`, not `django-tinymce`. `django-tinymce` uses `HTMLField` for rich text model fields.

Quickstart

To quickly set up django-tinymce, first install the package and add 'tinymce' to your `INSTALLED_APPS`. Include `tinymce.urls` in your project's `urls.py`. Then, configure TinyMCE settings in `settings.py`, paying attention to `TINYMCE_JS_URL` for the TinyMCE JavaScript source (either self-hosted or CDN) and `TINYMCE_DEFAULT_CONFIG` for editor options. You can use `tinymce.models.HTMLField` directly in your models or `tinymce.widgets.TinyMCE` in your Django forms or admin definitions to apply the rich text editor.

# settings.py
import os

INSTALLED_APPS = [
    # ...
    'tinymce',
]

# Configure TinyMCE (adjust TINYMCE_JS_URL based on self-hosted or CDN)
TINYMCE_JS_URL = 'https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js' # Example using CDN with no API key
# OR for self-hosted: TINYMCE_JS_URL = os.path.join(STATIC_URL, 'tinymce/tinymce.min.js')

TINYMCE_DEFAULT_CONFIG = {
    'height': 360,
    'menubar': False,
    'plugins': 'advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste code help wordcount',
    'toolbar': 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
    'custom_undo_redo_levels': 10,
    'browser_spellcheck': True, # Important for TinyMCE 6+ spellcheck
}

# urls.py (project level)
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('tinymce/', include('tinymce.urls')), # Required for TinyMCE views
]

# models.py (your app)
from django.db import models
from tinymce.models import HTMLField

class MyRichTextModel(models.Model):
    title = models.CharField(max_length=200)
    content = HTMLField()

    def __str__(self):
        return self.title

# admin.py (your app)
from django.contrib import admin
from .models import MyRichTextModel
from tinymce.widgets import TinyMCE
from django import forms

class MyRichTextAdminForm(forms.ModelForm):
    content = forms.CharField(widget=TinyMCE(attrs={'cols': 80, 'rows': 30}))

    class Meta:
        model = MyRichTextModel
        fields = '__all__'

@admin.register(MyRichTextModel)
class MyRichTextModelAdmin(admin.ModelAdmin):
    form = MyRichTextAdminForm

view raw JSON →