In this tutorial you will learn how to use tinymce (a rich text editor) in your django web application.
1. Install django-tinymce and configure your project
You can find the Github repertory of the project here :
https://github.com/openescuela/opsatipstutos/tree/main/tips2-tinymce
In this example, the project is named mysite and the application is named blogs.
Open your terminal and go to the repertory of your Django project, active the virtual environment, and install django-tinymce
$ pip install django-tinymce
Add TinyMCE to the installed app
mysite/settings.py
.
.
.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blogs',
'tinymce',
]
.
.
.
Add the URLs of the TinyMCE app to the urlpatterns of the project.
mysite/urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include("blogs.urls")),
path('tinymce/', include('tinymce.urls')),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
2. Add TinyMCE text editor for a model on the admin page
blogs/modes.py
from django.db import models
from tinymce import models as tinymce_models
class Project(models.Model):
name = models.CharField(max_length=50)
content = tinymce_models.HTMLField()
blogs/views.py
from django.shortcuts import render
from .models import Project
def index(request):
projects = Project.objects.all()
return render(request, 'blogs/index.html',{'projects':projects})
blogs/urls.py
from . import views
from django.urls import path
app_name = 'blogs'
urlpatterns = [
path('', views.index, name='index'),
]
blogs/admin.py
from django.contrib import admin
from .models import Project
admin.site.register(Project)
blogs/templates/blogs/index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="container">
<h1> This is my blog </h1>
{% for project in projects %}
{{project.name}}
{{project.content|safe}}
{% endfor %}
</div>
</body>
</html>
Run migration, run the server, go to the admin page, add some projects and go to the localhost to show the results.
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
Add more features to your text editor
mysite/settings.py
.
.
.
TINYMCE_DEFAULT_CONFIG = {
"height": "320px",
"width": "960px",
"menubar": "file edit view insert format tools table help",
"plugins": "advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code "
"fullscreen insertdatetime media table paste code help wordcount spellchecker",
"toolbar": "undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft "
"aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | forecolor "
"backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | "
"fullscreen preview save print | insertfile image media pageembed template link anchor codesample | "
"a11ycheck ltr rtl | showcomments addcomment code",
"custom_undo_redo_levels": 10,
"language": "en_EN", # To force a specific language instead of the Django current language.
}
3. Add TinyMCE text editor for user interface
blogs/forms.py
from django import forms
from tinymce.widgets import TinyMCE
from .models import Project
class TinyForm(forms.ModelForm):
content = forms.CharField(widget=TinyMCE(attrs={'cols': 80, 'rows': 30}))
class Meta:
model = Project
fields = ('name',)
blogs/views.py
from django.shortcuts import render
from .models import Project
from .forms import TinyForm
def index(request):
projects = Project.objects.all()
form = TinyForm()
return render(request, 'blogs/index.html',{'projects':projects,'form':form})
blogs/templates/blogs/index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="container">
<h1> This is my blog </h1>
{% for project in projects %}
{{project.name}}
{{project.content|safe}}
{% endfor %}
</div>
<div class="container">
<form class="" action="index.html" method="post">
{{ form.media }}
{{form.content}}
</form>
</div>
</body>
</html>
Run your server and go to your browser with the localhost.
tarikzrrk
Merci beaucoup mon prof