DEV Community 👩‍💻👨‍💻

Cover image for Django-TinyMce
Madhuban Khatri
Madhuban Khatri

Posted on

Django-TinyMce

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 manage.py startapp main
Enter fullscreen mode Exit fullscreen mode

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

INSTALLED_APPS = [
      #some other apps installed
      ..
      ..
      'main',
      'tinymce'
]
Enter fullscreen mode Exit fullscreen mode

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

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

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

6.) create 'urls.py' 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 'views.py' 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)
        create_post.save()
    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 'settings.py'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR,'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',
            ],
        },
    },
]
Enter fullscreen mode Exit fullscreen mode

9.) open models.py 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 admin.py file

from django.contrib import admin
from .models import Post

# Register your models here.
admin.site.register(Post)

Enter fullscreen mode Exit fullscreen mode

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

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

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

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

    <script>
        tinymce.init({
            selector: '#exampleFormControlTextarea1'
        });
    </script>
    <style>
        #posts{
            position:absolute;
            top:15px;
            right:0px;
        }
    </style>
    <title>Index page</title>
</head>

<body>
    <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>
        <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>
        <div class="mb-3">
            <input type="submit" class="btn btn-primary"/>
        </div>
        </form>
    </div>

    <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>
                <p>{{post.desc|safe}}</p>
                <hr>
            </div>
        {% endfor %}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
        </script>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Thank you for visit my blogs.

Top comments (0)

12 Gorgeous UI Components for Your Design Inspiration

12 Gorgeous UI components for your design inspiration: cards, text, buttons, checkboxes, icons, loaders and menus.