Open the terminal to install ck editor module using following command

 code
 source

1. pip install django-ckeditor

2.

Open the settings.py file and add the coding snippet in INSTALLED_APPS

 code
 source

1. 'ckeditor',
2.
3. 'ckeditor_uploader',
4.

Add the following coding snippet after the INSTALLED_APPS

 code
 source

1. CKEDITOR_UPLOAD_PATH = 'uploads/'
2.

Add the following code bottom of the settings.py file

 code
 source

1. STATIC_URL = '/static/'
2.
3. STATIC_ROOT = os.path.join(BASE_DIR, "static")
4.
5. MEDIA_URL = '/media/'
6.
7. MEDIA_ROOT = os.path.join(BASE_DIR, "media")
8.

Add the following code in urls.py of root app

 code
 source

1. from django.conf import settings

2.
3. from django.conf.urls.static import static
4.
5. if settings.DEBUG:
 6.
7. urlpatterns+=static(settings.STATIC_URL,
document_root=settings.STATIC_ROOT)
8.
9. urlpatterns+= static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
10.

Also add the path in urls.py file of same app

 code
 source

1. path('ckeditor/', include('ckeditor_uploader.urls')),
2.

Now start an app and goto it's models.py file. Now we are going to create a model name article
with title and body. Title will be the charfield but body will be editor. Follow the code below

 code
 source

1. from django.db import models

2.
3. from ckeditor.fields import RichTextField
4.
5. class SpatialData(models.Model):
6.
7. title=models.CharField(max_length=100)
8.
9. body=RichTextField()
10.
11. def __str__(self):
12.
13. return self.title
14.

Now migrate the model and visite the add article page and you will see like following.
You can't upload any image, rather you only add the link to show image here. Just re-write the
code to upload image and add Rich

 code
 source

1. from django.db import models

2.
3. from ckeditor_uploader.fields import RichTextUploadingField
4.
5. class SpatialData(models.Model):
6.
7. title=models.CharField(max_length=100)
8.
9. body=RichTextUploadingField()
10.
11. def __str__(self):
12.
13. return self.title
14.

You have to add a simple change in form.html file for upload image. Add the following coding
snippet after {% csrf_token %}
 code
 source

1. {{ form.media }}
2.