How to Integrate Custom Rich Text-Editor in Django

Integrating Custom Rich Text-Editor in Django

In this tutorial we will implement tinymce text editor in our django application.

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. Now our task is to customize this editor to look good and add more functionalities in it.

Step 6.
Now go to Tinymce download page and download any sutiable version for your django app.

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.

We are done here. Now you have a custom Rich Text Editor in your django application.