A rich text editor is an essential feature for any blog application, providing a user-friendly way to format content. One of the most popular options is TinyMCE, a flexible WYSIWYG editor that integrates seamlessly with Django. In this guide, we'll walk through installing and configuring TinyMCE in a Django project.

Why Use TinyMCE?

TinyMCE is widely used because of its:

• • Customizability – Offers extensive toolbar and plugin options.

  • Ease of Integration – Simple to install and configure with Django.

  • Flexible Deployment – Can be installed locally or loaded via a CDN.

Step 1: Install TinyMCE

There are two ways to add TinyMCE to your Django project:

1. 1. Install the package using pip:

pip install django-tinymce

1. 2. Alternatively, use the TinyMCE CDN for a lightweight setup (not covered in this guide but an option for static websites).

To ensure consistency, add the package to your requirements.txt file:

# requirements.txt

django-tinymce==4.1.0

Step 2: Configure Django Settings

Update your settings.py file to include TinyMCE in the INSTALLED_APPS section:

# blog_project/settings.py

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",

    # Custom apps
    "account",
    "blog",
    "core",

    # Third-party packages
    "tinymce",  # Add TinyMCE to installed apps
]

Next, define a custom configuration for TinyMCE at the bottom of settings.py:

# TinyMCE Configuration
TINYMCE_DEFAULT_CONFIG = {
    "cleanup_on_startup": True,
    "custom_undo_redo_levels": 20,
    "selector": "textarea",
    "theme": "silver",
    "plugins": """
        textcolor save link image media preview codesample contextmenu
        table code lists fullscreen insertdatetime nonbreaking
        searchreplace wordcount visualblocks visualchars autolink
    """,
    "toolbar1": """
        fullscreen preview bold italic underline | fontselect fontsizeselect
        | forecolor backcolor | alignleft alignright aligncenter alignjustify
        | indent outdent | bullist numlist table | link image media | codesample
    """,
    "toolbar2": """
        visualblocks visualchars | charmap hr pagebreak nonbreaking anchor | code
    """,
    "contextmenu": "formats | link image",
    "menubar": True,
    "statusbar": True,
}
TINYMCE_SPELLCHECKER = True

Understanding TinyMCE Configuration

TinyMCE offers a variety of configuration options to enhance the editor’s functionality. Here’s a breakdown of key settings:

• • selector: Specifies which HTML elements should be transformed into a TinyMCE editor.

  • theme: Defines the visual appearance of the editor (e.g., "silver").

  • plugins: Lists the TinyMCE features you want to include, such as text formatting, image insertion, and spellchecking.

  • toolbar1 & toolbar2: Define which buttons appear in the editor’s toolbar.

  • contextmenu: Controls right-click menu options.

  • menubar & statusbar: Toggle the visibility of the menu and status bars.

Step 3: Set Up URL Configuration

Add the TinyMCE URL pattern in urls.py:

# blog_project/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("admin/", admin.site.urls),
    path("blog/", include("blog.urls", namespace="blog")),
    path("tinymce/", include("tinymce.urls")),
]

Step 4: Update the Blog Model

Replace Django’s default TextField with TinyMCE’s HTMLField in models.py:

# blog/models.py

from django.db import models
from tinymce.models import HTMLField

class Post(models.Model):
    title = models.CharField(max_length=250)
    slug = models.SlugField(max_length=250, unique=True)
    body = HTMLField()  # Use TinyMCE for rich text content

After modifying the model, apply migrations:

python manage.py makemigrations
python manage.py migrate

Step 5: Update the Template to Render HTML

By default, Django escapes HTML content for security reasons. To display formatted content correctly, use the safe template filter:

<!-- blog/templates/post/details.html -->

<p>{{ post.body|safe }}</p>

With these steps I have successfully integrated TinyMCE into my Django blog project.