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

14 May, 2021
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.
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.
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.
simranarora5sos
Python Django
Python
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Install PIP on Windows ?
Python Classes and Objects
Python OOPs Concepts
Introduction To PYTHON
How to drop one or multiple columns in Pandas Dataframe
Python | os.path.join() method
Check if element exists in list in Python
How To Convert Python Dictionary To JSON?
Python | Get unique values from a list
Create a directory in Python