How to Integrate Custom Rich Text-Editor in Your Django Website

In this article, we will implement tinymce text editor in our Django application.

What is django-tinymce?

django-tinymce is a Django application that contains a widget to render a form field as a TinyMCE editor.

Features :-

• Use as a form widget or with a view.
• Enhanced support for content languages.
• Integration with the TinyMCE spellchecker.
• Enables predefined link and image lists for dialogs.
• Support for django-staticfiles
• Can compress the TinyMCE Javascript code.

How to add Tinymce Editor in Django Project?

Step 1 – Install Django and create a django project and app.

Step 2 – Install django-tinymce:

pip install django-tinymce

Step 3 – 

Add tinymce to INSTALLED_APPS in settings.py for your project:

INSTALLED_APPS = (
   ...
   'tinymce',
)

Step 4 –

Add tinymce.urls to urls.py for your project:

urlpatterns = [
   ...
   url(r'^tinymce/', include('tinymce.urls')),
]

Step 5 –

Edit your models.py file accordingly and introduce an HTMLField() for Rich Text Editor:]

from django.db import models
from tinymce.models import HTMLField
class MyModel(models.Model):
   ...
   content = HTMLField()

This will integrate a simple Rich Text Editor in your django application.

You will have something like this in your database admin panel:-

 Now our task is to customize this editor to look good and add more functionalities in it.

Adding more Customizations – 

Step 6 –

Now go to Tinymce download page and download any suitable version for your django app.

Note – you can also use Tinymce CDN to integrate tinymce in your django app.

Step 7 – 

Now copy your downloaded Tinymce files and paste them in your project’s static folder. like static/js/tinymce

Step 8 –

Now go to Tinymce demo page and choose desired text editor of your choice. You can choose a paid version also, if you need more functionalities. Copy the content of JS file from editor.

Step 9 –

Make a new file custom.js in static/js/tinymce folder and paste the copied content in it and save it. There are many plugins in this JS file content you can add or remove them according to your need.

Step 10 –

Now include both tinymce.min.js and custom.js file in your desired template.

<!--Tinymce Text-Editor (Must be in Head Tag) -->
 <script src="{% static 'myapp/js/tinymce/tinymce.min.js' %}"></script>
 <script type="text/javascript" src="{% static 'myapp/js/tinymce/custom.js' %}" ></script>

Step 11 – 

Now create a form according to your Django model and render it in desired template. You can use {{ form.as_p }} or {{ form.as_ul }} or {{ form.as_table }} to display the new Rich Text Editor. If you want to display a default body text in your text editor and you can view page source of your form and copy and edit it according to your need and remove {{ }} section and paste that copied form and render it in your django template.

That’s it!! Thank You.

I  have written the same article on GeeksforGeeks as well. 

If you also wish to share your knowledge with the TheCodeSpace fam kindly share your thoughts/article on rajparmar2308@gmail.com.