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
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
3.) Create an 'main' app in 'tiny_mce' folder using following command
python manage.py startapp main
4.) Open setting.py file and add 'main' app & 'tiny_mce'
INSTALLED_APPS = [
#some other apps installed
..
..
'main',
'tinymce'
]
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
]
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')
]
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)
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',
],
},
},
]
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
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)
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>
Top comments (0)