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/