Scribd
Upload
90 views

CK-Editor For Django

The document provides instructions for installing and configuring the CKEditor WYSIWYG editor module in a Django project. It describes downloading and adding CKEditor and its uploader extension to settings, creating model fields for title and body content, migrating the model, and editing templates to allow image uploads in the editor body.

Uploaded by

leon_sarker6476
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
90 views

CK-Editor For Django

The document provides instructions for installing and configuring the CKEditor WYSIWYG editor module in a Django project. It describes downloading and adding CKEditor and its uploader extension to settings, creating model fields for title and body content, migrating the model, and editing templates to allow image uploads in the editor body.

Uploaded by

leon_sarker6476
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy