How To Extract HTML Code From Rich Text In Python Django

If you want to allow users to enter formatted content, bold, italics, lists, and links, but then you also need to get the underlying HTML code for storage, rendering, or further processing, I’ve found that integrating a rich text editor like CKEditor into Django projects is an easy and reliable way to manage this.

In this tutorial, I’ll walk you through how to get HTML code from rich text in Python Django using CKEditor. I’ll share the exact steps and code snippets I use in my projects, so you can easily replicate the process and get your app handling rich text like a pro.

Table of Contents

Methods to Extract HTML from Rich Text in Django

Rich text editors allow users to format content visually, but what you want to store or manipulate is the HTML behind it. For example, if you’re building a blog platform in the USA and want users to post formatted articles, you’ll need the HTML to render those articles correctly on the frontend.

Getting the HTML code also lets you sanitize inputs, customize display, or convert content to other formats. So, it’s essential to capture the HTML directly from the rich text editor.

Check out Create a User Profile Using Django

1: Use CKEditor with Django

CKEditor is a popular rich text editor that integrates smoothly with Django. It outputs clean HTML code, which you can then save to your database or use however you want.

Step 1: Install the Django CKEditor Package

First, install the django-ckeditor package:

pip install django-ckeditor

Step 2: Add CKEditor to Your Django Project

In your settings.py, add 'ckeditor' to your INSTALLED_APPS:

INSTALLED_APPS = [
    # ... other apps
    'ckeditor',
]

Also, configure media settings to serve uploaded files (if you plan to allow image uploads):

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

Step 3: Update Your Model

In your Django app’s models.py, use RichTextField from ckeditor.fields for the field where you want rich text input:

from django.db import models
from ckeditor.fields import RichTextField

class Article(models.Model):
    title = models.CharField(max_length=200)
    content = RichTextField()

    def __str__(self):
        return self.title

The content field will now accept rich text input and store the corresponding HTML code.

Step 4: Configure URLs and Media

In your project’s urls.py, add the following to serve media files during development:

from django.conf import settings
from django.conf.urls.static import static
from django.urls import path, include

urlpatterns = [
    # ... your other urls
    path('ckeditor/', include('ckeditor_uploader.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Read Create an API in Python Django

Step 5: Use the CKEditor Widget in Admin or Forms

If you want to use CKEditor in Django Admin, it works automatically once you use RichTextField.

For custom forms, you can do:

from django import forms
from ckeditor.widgets import CKEditorWidget
from .models import Article

class ArticleForm(forms.ModelForm):
    content = forms.CharField(widget=CKEditorWidget())

    class Meta:
        model = Article
        fields = ['title', 'content']

Step 6: Access the HTML Code

Once a user submits the form or saves the model, the content field contains the HTML code generated by CKEditor. You can access it like this:

article = Article.objects.get(id=1)
html_code = article.content  # This is the raw HTML string
print(html_code)

You can now render this HTML safely in your templates using the |safe filter:

{{ article.content|safe }}

You can refer to the screenshot below to see the output:

2: Use Quill Editor with Django (Alternative)

If you want an alternative rich text editor, Quill is another excellent choice. It stores content in a JSON format by default, but you can convert it to HTML.

You can integrate Quill using JavaScript in your Django forms and then send the HTML to your backend.

This method requires more manual work to convert and sanitize HTML, but offers great flexibility.

Read Create a Card with a Button in Django

Tips for Handling Rich Text HTML Safely

Sanitize HTML: Always sanitize HTML before rendering it to prevent XSS attacks. Libraries like bleach can help clean unwanted tags.
Store HTML Carefully: Store the raw HTML in a TextField or RichTextField in your database.
Render with Caution: Use Django’s |safe filter only when you are sure the HTML is sanitized.

Integrating CKEditor in Django is a reliable way to get HTML code from rich text inputs. It simplifies user input, stores clean HTML, and lets you render formatted content seamlessly.

I’ve used this approach in many projects, especially for content-heavy applications like blogs and CMS platforms targeted at the US market. It saves time and avoids the headaches of manually parsing or generating HTML.

If you want a quick, reusable solution, go with CKEditor and Django’s RichTextField. For more custom needs, you can explore other editors like Quill.

I hope this guide helps you handle rich text inputs effortlessly in your Django apps!

You may also read:

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/