Learn Django tinymce text editor. In this tutorial, you will learn Django tiny MCE editor. We use the editor in the admin page of Django to add data into our database models using the Tiny MCE editor. Like RichTextFeild.

Requirements :

The tinymce package for the django is available here

pip install django

This command will install the latest Django package into your local machine.

Firstly Create a Django Project :

python -admin django startproject project

This command will create new project.

Navigate to Project folder :

cd project #projectname

This will change the current directory of the terminal to the project directory

Secondly Creating app with Demo app :

py manage.py startapp demo

Create a demo app for the Django project we have created.

Thirdly Create Urls.py in Demo app

from django.urls import path
from . import views
urlpatterns = [
    path('', views.home, name="home")
]

Here, We are creating the routing paths for the home view this will render out the Html page we have created for the model form. However the ” will represent the localhost path it will render the Html template as the homepage for the project on the localhost address. i.e. 127.0.0.1:8000.

Configure the Tiny MCE in Settings.py :

# Application definition

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

Add the demo and tinymce package to the installed app in Settings.py file of the project.

Model Creation in Demo app :

from django.db import models

from tinymce.models import HTMLField
# Create your models here.

class Student(models.Model):
    name = models.CharField(max_length=200)
    remark = HTMLField()

Here, We are creating the Student model in the demo app with two fields name and remark. For name field we are using the basic models package of Django and for the remark field we are using the Html Field from the tinymce editor fields which we have imported.

Let’s Register model in admin.py

from django.contrib import admin
from .models import *
# Register your models here.

admin.site.register(Student)

Configuring the admin site by registering the Student model in the demo app inside the admin.py file. This will make changes to the admin interface and resemble the Student model into the admin site.

Add Tiny MCE in urls.py

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('tinymce/', include('tinymce.urls')),
    path('', include('demo.urls'))
]

Finally, Configure the tinymce URL’s into the main URLs file of the project. This will render all the views present in the tinymce app which we previously configured in the installed apps of settings.py file

Finally the Output :

Output