How to Use TinyMCE Editor in Django?

Published On: 19/10/2022 | Category: Django

Hi Dev,

Here, I will show you how to use tinymce editor in django. let’s discuss about how to use tinymce editor in django python. let’s discuss about django tinymce editor example tutorial. you will learn django tinymce editor example app.

A powerful and adaptable online text editor called TinyMCE works with many different frameworks, including Django. It helps when you want to add stylish elements to your material, such bright words, unique fonts, tables, and other elements.

Here,you can just follow bellow all step how to use tinymce editor in django:

Step 1: Create a Project

In this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:

django-admin startproject exampleapp

Step 2: Create a App

Now we'll create a single app called polls to store a list of post names. We're keeping things intentionally basic. Stop the local server with Control+c and use the startapp command to create this new app.

python3 startapp core

Step 3: Install Required Library

Install Django and its prerequisites:

pip install django django-tinymce4-lite

Step 4: Update

Next, In this step we require to do two things in our file, One is our installed app name Add the below lines to your file:



   'height': 360,
   'width': 750,
   'cleanup_on_startup': True,
   'custom_undo_redo_levels': 20,
   'selector': 'textarea',
   'theme': 'modern',
   'plugins': '''
   textcolor save link image media preview codesample contextmenu
   table code lists fullscreen insertdatetime nonbreaking
   contextmenu directionality searchreplace wordcount visualblocks
   visualchars code fullscreen autolink lists charmap print hr
   anchor pagebreak
   '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,
Step 5: Create a Model

Now go for the models we will We'll call our single model TextEditor and it will have define all fields.

from django.db import models

# Create your models here.
class TextEditor(models.Model): 
    title = models.CharField(max_length=20)
    content = models.TextField()

    def __str__(self):
        return str(self.title)

Ok, all set. We can engender a migrations file for this change, then integrate it to our database via migrate.

python makemigrations
python migrate
Step 6: Update File

Let’s add the following code in our file.

from .models import TextEditor
from django.db import models
from tinymce.widgets import TinyMCE

class TextEditorAdmin(admin.ModelAdmin):
    list_display = ["title"]
    formfield_overrides = {
        models.TextField: {'widget': TinyMCE()}
    }, TextEditorAdmin)

Step 7: Creating the Views

In this step, we need to create the views for performing the post request data is to form is valid to is_valid method.Open the core/ file and add:

from django.shortcuts import render
from .models import TextEditor

def homepage(request):
    text = TextEditor.objects.all()
    context = {
    return render(request, "homepage.html",context) 

Step 8: Creating the Templates

Next, open the core/templates/homepage.html file and the add:

{% load static %}
<link href="{% static 'tinymce/css/prism.css' %}" rel="stylesheet">

    <div class="container">
        {% for txt in text %}
            <p> {{txt.content|safe}}  </p>

        {% endfor %}
<script src="{% static 'tinymce/js/prism.js' %}"></script>

Step 9: Creating Urls

In this section, we’ll create the urls to access our views.Go to the core/ file and update it as follows:

from django.urls import path, include
from . import views

urlpatterns = [
    path('tiny-editor', views.homepage),

Next, we will require the modify the your root preoject folder lets update the file.

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

urlpatterns = [
    path('', include('core.urls')),
    path('tinymce/',include('tinymce.urls')), # new

Run the Server

In this step, we’ll run the local development server for playing with our app without deploying it to the web.

python runserver

Next, go to the url address bar with a web browser.


I Hope It will help you....