Add Rich Text Editor (CKEditor) in Django Admin

Basic Setup

  • install CKEditor pip install django-ckeditor
  • include in INSTALLED_APPS  in settings.py 'ckeditor', and add CKEDITOR_CONFIGS on the end of the file
    • if toolbar is None, it will display all the text editor toolbar fields, you can use extraPlugins to include more fields - inserting code snippets in the text
      CKEDITOR_CONFIGS = {
          'default': {
              'toolbar': None,
              'extraPlugins': 'codesnippet',
          },
      }
    • you can setup more toolbars and use each one for different field in models.py
      CKEDITOR_CONFIGS = {
          'default': {
              'toolbar': 'Custom',
              'height': 500,
              'toolbar_Custom': [
                  ['Bold', 'Link', 'Unlink', 'Image'],
              ],
          },
          'special': {
              'toolbar': 'Special',
              'toolbar_Special': [
                  ['Bold'],
              ],
          }
      }
  • in models import from ckeditor.fields import RichTextField
  • use it in model content = RichTextField()
  • create migrations python manage.py makemigrations
  • aplly migrations python manage.py migrate
  • in root urls.py (NOT apps urls.py):
    from django.conf import settings
    from django.conf.urls import url, include
    from django.conf.urls.static import static
    
    urlpatterns = [
        ...
        url(r'^ckeditor/', include('ckeditor_uploader.urls')),
    ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

     

  • for field with RichTextField() use in templates {{ post.content | safe }} to avoid escaping html tags

 

Upload Images with CKEditor

  • ...

for more Rich text editors check https://djangopackages.org/grids/g/wysiwyg/


Resources:

➡️https://samulinatri.com/blog/django-ckeditor-codesnippet-hightlightjs-youtube/

➡️https://django-ckeditor.readthedocs.io/