How to Use TinyMCE Editor in 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 manage.py startapp core
Step 3: Install Required Library
Install Django and its prerequisites:
pip install django django-tinymce4-lite
Step 4: Update setting.py
Next, In this step we require to do two things in our settings.py file, One is our installed app name Add the below lines to your settings.py file:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'core',
'tinymce',
]
TINYMCE_DEFAULT_CONFIG = {
'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.
core/models.py
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 manage.py makemigrations python manage.py migrateStep 6: Update admin.py File
Let’s add the following code in our admin.py 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()}
}
admin.site.register(TextEditor, 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/views.py file and add:
core/views.py
from django.shortcuts import render
from .models import TextEditor
def homepage(request):
text = TextEditor.objects.all()
context = {
'text':text
}
return render(request, "homepage.html",context)
Step 8: Creating the Templates
Next, open the core/templates/homepage.html file and the add:
<head>
{% load static %}
<link href="{% static 'tinymce/css/prism.css' %}" rel="stylesheet">
</head>
<body>
<div class="container">
{% for txt in text %}
<p> {{txt.content|safe}} </p>
{% endfor %}
</div>
</body>
<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 urls.py core/urls.py file and update it as follows:
core/urls.py
from django.urls import path, include
from . import views
urlpatterns = [
path('tiny-editor', views.homepage),
]
Next, we will require the modify the urls.py your root preoject folder lets update the file.
exampleapp/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
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 manage.py runserver
Next, go to the url address bar with a web browser.
http://localhost:8000/tiny-editorOutput
I Hope It will help you....