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.

1 comment

tarikzrrk

Merci beaucoup mon prof 

Log in to leave a reply

Related posts

Developing a Web Application with Django Part 1: Getting Started

1/12/2021

Developing a Web Application with Django Part 2: Templates

15/12/2021

Developing a Web Application with Django Part 3 : Models

7/1/2022