How to add Froala HTML Editor Software in Django in 2025

add HTML editor software in Django

Django is a powerful Python web framework that helps developers build web applications quickly and efficiently. Froala 4.4 release adds support to the popular Python framework, Django 5.

Integrating Froala HTML Editor Software into a Django project allows users to create and edit rich text content within the application. By combining the flexibility of Froala and the rapid development capabilities of Django, you can create dynamic, user-friendly web applications that meet the evolving needs of your audience.

In this step-by-step guide, you’ll learn how to integrate the Froala HTML Editor Software into a Django form, allowing your users to create and edit rich text content within your application. Whether you’re building a blog, a content management system, or any other web application, this integration will enhance the user experience and unlock new possibilities for your project.

Integrate Froala into Django

Prerequisites

Being a Python web framework, Django requires Python. We’re assuming:

  • You are familiar with Python and have it installed on your computer. If not, please install python and come again.
  • You have Django installed already.

Versions Used in This Tutorial

  • Froala Editor V4.4
  • Python V3.13.1
  • Django V5.1.5

Step 1: Getting started

From the command line, cd into a directory where you’d like to store your code and create a new directory named froaladjangotutorial.

mkdir froaladjangotutorial
 Then, run the following command to bootstrap a new Django project:
django-admin startproject myapp froaladjangotutorial

This will create a project called myapp inside the froaladjangotutorial directory.

Step 2: Creating a Demo app

To create your app, jump into the created directory:

cd froaladjangotutorial

Type the following command:

py manage.py startapp demos

That’ll create a directory demos which will contain our demo code.

Step 3: Install Froala

To begin, you’ll need to install the Froala Django package. You can do this using pip.

pip install django-froala-editor

Install Froala Django SDK

After successfully installed, open myapp/settings.py and add froala_editor into the INSTALLED_APPS array.

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'froala_editor'
]

Then open the myapp/urls.py file and include the Froala Editor URLs.

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

urlpatterns = [
    path("demos/", include("demos.urls")),
    # Froala Editor URLs
    path('froala_editor/', include('froala_editor.urls')),
    path('admin/', admin.site.urls),
]

Step 4: Create a form with a Froala

Create a new file demos/forms.py and add the following code:

from django import forms
from froala_editor.widgets import FroalaEditor

class FroalaForm(forms.Form):
    content = forms.CharField(widget=FroalaEditor)
 In the above code, we've created a Django form with a FroalaEditor widget. 

Step 5: Configure Froala

You can also customize the editor’s appearance and behavior by passing various options to the FroalaEditor widget.

For example, to initialize the Froala Editor with an inline toolbar, you can use the following code:

from django import forms
from froala_editor.widgets import FroalaEditor

class FroalaForm(forms.Form):
    content = forms.CharField(widget=FroalaEditor(options={
      'toolbarInline': True,
    }))

This will create a Froala Editor instance with an inline toolbar, allowing users to format the content as needed. You can further customize the editor by modifying the options passed to the FroalaEditor widget.

Step 6: Create a template to render the form

You’ll need to configure the Froala Editor in your Django templates. In the demos app, create a new file called froala_form.html in the /templates directory. In this file, you’ll add the necessary HTML and Django template tags to integrate the Froala Editor.

 

<!DOCTYPE html>
<html>

<head>
    <title>Froala Editor</title>
    {{ form.media }}


</head>

<body>
    <h1>Froala Editor</h1>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Submit</button>
    </form>

</body>

</html>

Make sure to update your settings.py to include the templates directory in the TEMPLATES setting:

import os

# ...existing code...

ROOT_URLCONF = 'mysite.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'demos', 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Step 7: Update the view to render the template

Update your demos/views.py file to render the form in the template:

from django.shortcuts import render
from .forms import FroalaForm

def index(request):
    if request.method == 'POST':
        form = FroalaForm(request.POST)
        if form.is_valid():
            # Process the form data
            pass
    else:
        form = FroalaForm()
    
    return render(request, 'froala_form.html', {'form': form})

Step 8: Map The URLs

Define a URLconf for the demos app by creating a file demos/urls.py with the following content:

from django.urls import path

from . import views

urlpatterns = [
    path("", views.index, name="index"),
]

The next step is to configure the global URLconf in the myapp project to include the URLconf defined in demos.urls.

To do this, add an import for django.urls.include in myapp/urls.py and insert an include() in the urlpatterns list, so you have:

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

urlpatterns = [
    path("demos/", include("demos.urls")),
    path('admin/', admin.site.urls),
]

Step 9: Test the demo app

Verify the demo app is working with the following command:

python manage.py runserver

You can now access the demo app by visiting `http://127.0.0.1:8000/demos/` in your web browser. This will display the form you created, including the Froala Editor.

Froala into Django

With the Froala Editor integrated into your Django application, users can now create and edit rich text.

Conclusion

Integrating the Froala WYSIWYG Editor into your Django application is a powerful way to enable rich text editing for your users. By following the steps outlined in this article, you can quickly add a feature-rich text editor to your Django forms.

The Froala Editor provides a wide range of customization options, allowing you to tailor the editor to your specific needs. Whether you want an inline toolbar, custom buttons, or advanced formatting options, the Froala Editor has you covered.

Now that you know how to add the Froala Editor to your Django project, why not give it a try? Start by creating a new Django project and follow the steps in this guide. Before long, you’ll have a dynamic, user-friendly text editing experience integrated into your web application.

Posted on January 17, 2025

Mostafa Yousef

Senior web developer with a profound knowledge of the Javascript and PHP ecosystem. Familiar with several JS tools, frameworks, and libraries. Experienced in developing interactive websites and applications.

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *

    Hide Show