Search for a command to run...
Adding WYSIWYG Rich Text Editor to Django Project
Experienced Full Stack Software Engineer with 4+ Years of experience, proficient in Django and React, with expertise in Python, JavaScript and Typescript, also an author of Dev.Junction Blogs & YouTube Channel, expert in Python/Django, Rest Framework, ReactJS/NextJS and TypeScript, currently based in Pune, India.
No comments yet. Be the first to comment.
Django provides a great Admin panel rich in features and highly customizable, in this series of blogs we will be introduced to all such possible customizations and more.
How To Show Image In Django Admin?
TypeScript, a Syntactic sugar on top of JavaScript
Are you tired of tightly coupled code and struggling to keep track of events in your Django application? Look no further! Our new e-book, "Django Signals Demystified: A Step-by-Step Guide to Event-Driven Programming" is here to help you master the po...
Maximizing Performance with select_related and prefetch_related in Django
2022 was not a good year financially because I did so many mistakes knowingly or unknowingly that, eventually, made me lose INR 500K over the course of just 6 months. So here are those mistakes which taught me about freelancing, finance management et...
Improve the user experience and efficiency of your React app with these simple techniques.
WYSIWYG aka What You See Is What You Get is a very useful for the content rich websites, and by default Django Admin comes with a simple HTML text field. In this blog, we’ll add a Rich Text Editor (WYSIWYG) to our Django project.
We’ll use one of the best Rich text editors available for Django, which is django-ckeditor.
First install the package given below using pip.
pip install django-ckeditor
Now you have to add django-ckeditor in your INSTALLED_APPS list in your settings.py file.
...
INSTALLED_APPS = [
...
'ckeditor_uploader',
'ckeditor',
]
...
Congratulations, you are ready to set up the configuration of ckeditor.
django-ckeditor comes with so many features, but to enable them fully, you have to add some configurations in your Django’s settings.py file.
CKEDITOR_UPLOAD_PATH = "uploads/"
CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'Custom',
'width': '100%',
'toolbar_Custom': [
['Styles', 'Format', 'Bold', 'Italic', 'Underline',
'Strike', 'SpellChecker', 'Undo', 'Redo'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Table', 'HorizontalRule'],
['TextColor', 'BGColor'],
['Smiley', 'SpecialChar'], ['Source'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['NumberedList', 'BulletedList'],
['Indent', 'Outdent'],
['Maximize'],
],
'autoParagraph': False,
'enterMode': 2,
}
}
The final step of the configuration is to add the below code in your root urls.py file.
...
urlpatterns.extend(
[path('ckeditor/', include('ckeditor_uploader.urls')),]
)
Congratulations, your Rich Text Editor setup is completed, now you are ready to add it in your project or in Admin.
Yes, you heard it right, you can add this Rich Text Editor to your Model admin as well, you just have to add formfield_overrides in your Model Admin something like this, this will override the default TextFIeld widget of the Django admin form for that particular model.
from django import admin
from django.contrib import admin
from ckeditor.widgets import CKEditorWidget
@admin.register(MyModel)
class MyModelAdmin(admin.ModelAdmin):
...
formfield_overrides = {
models.TextField: {'widget': CKEditorWidget},
}
from django import forms
from ckeditor.widgets import CKEditorWidget
from myapp.models import MyModel
class MyModelForm(forms.ModelForm):
text = forms.CharField(widget=CKEditorWidget())
class Meta:
model = MyModel
fields = '__all__'
from django import forms
from ckeditor.widgets import CKEditorWidget
class MyForm(forms.Form):
text = forms.CharField(widget=CKEditorWidget())
That’s it for today, will met you in the next crispy blog.
Any thoughts? Write it down in the comments.
For more such crispy blogs daily, follow Dev.Junction, subscribe to our newsletter and get notified.