Ckeditor Integration in Django model.

One of the popular Django richtext editor is CKEditor. It provides a RichTextField, RichTextUploadingField, CKEditorWidget and CKEditorUploadingWidget utilizing CKEditor with image uploading and browsing support included.

This repository contains a demo project using the CKEditor plugin. Features contain in this repository are

Post a blog
Cardview blog post on the home page
Details post on the Details page
Contain post date
Sorted post by ordering post date

You can use this project for free and without keeping as the author of this repository.

fork the repository and clone it in your preferable directory
active virtual environment

  env\Script\active # for windows user

Install requirements.txt file

pip install -r requirements.txt

Ensure the migration

python manage.py makemigrations
python manage.py migrate

Create the superuser

  python manage.py createsuperuser

Run the application

python manage.py runserver

If you need to understand how it works or setup CKEditor of your own way then follow

Steps to integrate CKEditor in Django

Install django-ckeditor to your project path

pip install django-ckeditor

Add ckeditor to your INSTALLED_APPS in settings.py.

INSTALLED_APPS = [
  .........
  'ckeditor',
]

Required for using widget with file upload

Add `ckeditor_uploader` to your `INSTALLED_APPS ` setting

Add a CKEDITOR_UPLOAD_PATH setting to the project’s settings.py file
```
```py
CKEDITOR_UPLOAD_PATH = "uploads/"
```
```

Add CKEditor URL include to your project’s urls.py file

url(r'^ckeditor/', include('ckeditor_uploader.urls')),

# You can also set url path alternatively if the above url doesn't work
path('ckeditor/', include('ckeditor_uploader.urls')),

Use CKEditor in Django model

Go to models.py and create a class where you want to use RichTextField and import RichTextField

from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField

class Posts(models.Model):
    title = models.CharField(max_length=200) # Set your own
    description = RichTextField()
    
    # If you need to upload file then use RichTextUploadingField
    description = RichTextUploadingField(blank=True, null=True)

Configure CKEditor in Settings

Add the following setting in settings.py

STATIC_URL = '/static/'
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

# Add path file uploads 
CKEDITOR_UPLOAD_PATH = "uploads/"

# Configure CKEditor
CKEDITOR_CONFIGS = {
    'default': {
        'skin': 'icy_orange',
        'toolbar': 'Habib',
        'toolbar_Habib': [
            {'name': 'basicstyles',
             'items': ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},
            {'name': 'paragraph',
             'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',
                       'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl']},
            {'name': 'editing', 'items': [
                'Find', 'Replace']},
            {'name': 'yourcustomtools', 'items': ['Preview', 'Maximize']},
            '/',  # End of first line of CKEditor
            {'name': 'styles', 'items': [
                'Styles', 'Format', 'Font', 'FontSize']},
            {'name': 'colors', 'items': ['TextColor', 'BGColor']},
            {'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},
            {'name': 'insert',
             'items': ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe']},
            '/',  # End of second line of CKEditor
            {'name': 'mydev', 'items': [
                'Youtube', 'CodeSnippet', 'ExportPdf', 'Uploadfile', 'Mathjax']},
            # put this to force next toolbar on new line

        ],
        # 'toolbarGroups': [{ 'name': 'document', 'groups': [ 'mode', 'document', 'doctools' ] }],
        # 'height': 291,
        # 'width': '100%',
        # 'filebrowserWindowHeight': 725,
        # 'filebrowserWindowWidth': 940,
        # 'toolbarCanCollapse': True,
        # 'mathJaxLib': '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML',
        'fontSize_defaultLabel': 44,
        'tabSpaces': 4,
        'extraPlugins': ','.join([
            'uploadimage',  # the upload image feature
            # your extra plugins here
            'div',
            'autolink',
            'autoembed',
            'embedsemantic',
            'autogrow',
            # 'devtools',
            'widget',
            'lineutils',
            'clipboard',
            'dialog',
            'dialogui',
            'elementspath',
            'link', ' iframe', 'colorbutton', 'youtube',
            'codesnippet',
            'exportpdf',
            'uploadfile',
            'mathjax',

        ]),
    }
}

Add custom plugins or CKEDITOR skins

Go to CKEDITOR Plugin official site
Download which plugins or skin you need
Extract plugin or skin you downloaded. Copy inside plugin or skin folder
Paste plugin in your project env directory ...\env\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins
Paste skin in your project env directory ...\env\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\skins

Collect statistic to gather all under the same roof

python manage.py collectstatistic

That's all about it.

Thank you for keeping patience. If you love it do mark the Repository as stars or forks

mhhabib / Integrate-Django-Ckeditor