DEV Community

Cover image for Django-TinyMce
Madhuban Khatri
Madhuban Khatri

Posted on


Hello Friends,
Welcome back to my blog. In this blog, I will show you how to add TinyMce Editor in Django just in few minutes.

What is TinyMce ?

TinyMCE is an online rich-text editor released as open-source software under the MIT License. It has the ability to convert HTML text area fields or other HTML elements to editor instances. Wikipedia

Let's Start :)
1.) Create a project named-'tiny_mce'

your_directory/.../django-admin startproject tiny_mce
Enter fullscreen mode Exit fullscreen mode

2.) Open 'tiny_mce' folder in your favourite code editor and run the following command in terminal

pip install django-tinymce
#command will install tinymce in your system
Enter fullscreen mode Exit fullscreen mode

3.) Create an 'main' app in 'tiny_mce' folder using following command

python startapp main
Enter fullscreen mode Exit fullscreen mode

4.) Open file and add 'main' app & 'tiny_mce'

      #some other apps installed
Enter fullscreen mode Exit fullscreen mode

5.) open project '' file and add the code below

from django.contrib import admin  #already added
from django.urls import path, include #import include

urlpatterns = [
    path('admin/',,   #already added
    path('', include('main.urls'))   #add this line
Enter fullscreen mode Exit fullscreen mode

6.) create '' file in 'main' app and add the following code

from django.urls import path
from . import views
urlpatterns = [
    path('', views.home, name='home')
Enter fullscreen mode Exit fullscreen mode

7.) open '' file and add code

from django.shortcuts import render
from .models import Post

# Create your views here.
def home(request):
    if request.method=='POST':
        title = request.POST['post_title']
        content = request.POST['post_description']
        create_post = Post.objects.create(title=title, desc=content)
    all_posts = Post.objects.all()[::-1]
    data = {'posts':all_posts}
    return render(request,'index.html',data)
Enter fullscreen mode Exit fullscreen mode

8.) Create a 'templates' folder in 'tiny_mce' folder and add this directory in ''

        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR,'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
Enter fullscreen mode Exit fullscreen mode

9.) open and create a Post model.

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

# Create your models here.
class Post(models.Model):
    title = models.CharField(max_length=100)
    desc = HTMLField()     #add here as Description section

    def __str__(self):
        return self.title
Enter fullscreen mode Exit fullscreen mode

10.) Register 'Post' model in file

from django.contrib import admin
from .models import Post

# Register your models here.

Enter fullscreen mode Exit fullscreen mode

11.) create a 'index.html' in 'templates' folder

<!doctype html>
<html lang="en">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="" referrerpolicy="origin"></script>

            selector: '#exampleFormControlTextarea1'
    <title>Index page</title>

    <div class="container mx-5 my-3 w-50" style="border-right: 1px solid;">
        <h3>Create a Post</h3>
        <form method="post" action="{% url 'home' %}">
        {% csrf_token %}
        <div class="mb-3">
            <label for="exampleFormControlInput1" class="form-label">Post Title</label>
            <input type="text" class="form-control" name="post_title" id="exampleFormControlInput1" placeholder="Title">
        <div class="mb-3">
            <label for="exampleFormControlTextarea1" class="form-label">Content</label>
            <textarea class="form-control" name="post_description" id="exampleFormControlTextarea1" rows="3"></textarea>
        <div class="mb-3">
            <input type="submit" class="btn btn-primary"/>

    <div class="container w-50" id="posts">
        {% for post in posts %}
            <div class="container mx-5">
                <h3 style="border-bottom:1px solid; display:inline">{{post.title}}</h3>
        {% endfor %}
    <script src=""
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">


Enter fullscreen mode Exit fullscreen mode

Thank you for visit my blogs.

Top comments (0)