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.

Installation:

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.

Configuration:

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.

Add WYSIWYG in Django 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},
    }

Add WYSIWYG in a Model Form:

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__'

Add WYSIWYG in a Django Form:

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.

Social Links

• LinkedIn: https://www.linkedin.com/in/mnamegaurav/
• YouTube: https://www.youtube.com/devjunction
• Website: https://gaurav.devjunction.in/
• GitHub: https://github.com/mnamegaurav
• Instagram: https://www.instagram.com/mnamegaurav/
• Twitter: https://twitter.com/mnamegaurav