pip install django-ckeditor

​

CKEDITOR_CONFIGS = {

    'default': {

        'skin': 'moono',

        # 'skin': 'office2013',

        'toolbar_Basic': [

            ['Source', '-', 'Bold', 'Italic']

        ],

        'toolbar_YourCustomToolbarConfig': [

            {'name': 'document', 'items': ['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates']},

            {'name': 'clipboard', 'items': ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},

            {'name': 'editing', 'items': ['Find', 'Replace', '-', 'SelectAll']},

            {'name': 'forms',

             'items': ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',

                       'HiddenField']},

            '/',

            {'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',

                       'Language']},

            {'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},

            {'name': 'insert',

             'items': ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe']},

            '/',

            {'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},

            {'name': 'colors', 'items': ['TextColor', 'BGColor']},

            {'name': 'tools', 'items': ['Maximize', 'ShowBlocks']},

            {'name': 'about', 'items': ['About']},

            '/',  # put this to force next toolbar on new line

            {'name': 'yourcustomtools', 'items': [

                # put the name of your editor.ui.addButton here

                'Preview',

                'Maximize',

​

            ]},

        ],

        'toolbar': 'YourCustomToolbarConfig',  # put selected toolbar config here

        # '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',

        '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'

        ]),

    }

}

STATIC_URL = '/static/'

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

customColorPalette = [

        {

            'color': 'hsl(4, 90%, 58%)',

            'label': 'Red'

        },

        {

            'color': 'hsl(340, 82%, 52%)',

            'label': 'Pink'

        },

        {

            'color': 'hsl(291, 64%, 42%)',

            'label': 'Purple'

        },

        {

            'color': 'hsl(262, 52%, 47%)',

            'label': 'Deep Purple'

        },

        {

            'color': 'hsl(231, 48%, 48%)',

            'label': 'Indigo'

        },

        {

            'color': 'hsl(207, 90%, 54%)',

            'label': 'Blue'

        },

]

​

CKEDITOR_5_CUSTOM_CSS = 'path_to.css' # optional

CKEDITOR_5_FILE_STORAGE = "path_to_storage.CustomStorage" # optional

CKEDITOR_5_CONFIGS = {

    'default': {

        'toolbar': ['heading', '|', 'bold', 'italic', 'link',

                    'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', ],

​

    },

    'extends': {

        'blockToolbar': [

            'paragraph', 'heading1', 'heading2', 'heading3',

            '|',

            'bulletedList', 'numberedList',

            '|',

            'blockQuote',

        ],

        'toolbar': ['heading', '|', 'outdent', 'indent', '|', 'bold', 'italic', 'link', 'underline', 'strikethrough',

        'code','subscript', 'superscript', 'highlight', '|', 'codeBlock', 'sourceEditing', 'insertImage',

                    'bulletedList', 'numberedList', 'todoList', '|',  'blockQuote', 'imageUpload', '|',

                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'mediaEmbed', 'removeFormat',

                    'insertTable',],

        'image': {

            'toolbar': ['imageTextAlternative', '|', 'imageStyle:alignLeft',

                        'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:side',  '|'],

            'styles': [

                'full',

                'side',

                'alignLeft',

                'alignRight',

                'alignCenter',

            ]

​

        },

        'table': {

            'contentToolbar': [ 'tableColumn', 'tableRow', 'mergeTableCells',

            'tableProperties', 'tableCellProperties' ],

            'tableProperties': {

                'borderColors': customColorPalette,

                'backgroundColors': customColorPalette

            },

            'tableCellProperties': {

                'borderColors': customColorPalette,

                'backgroundColors': customColorPalette

            }

        },

        'heading' : {

            'options': [

                { 'model': 'paragraph', 'title': 'Paragraph', 'class': 'ck-heading_paragraph' },

                { 'model': 'heading1', 'view': 'h1', 'title': 'Heading 1', 'class': 'ck-heading_heading1' },

                { 'model': 'heading2', 'view': 'h2', 'title': 'Heading 2', 'class': 'ck-heading_heading2' },

                { 'model': 'heading3', 'view': 'h3', 'title': 'Heading 3', 'class': 'ck-heading_heading3' }

            ]

        }

    },

    'list': {

        'properties': {

            'styles': 'true',

            'startIndex': 'true',

            'reversed': 'true',

        }

    }

}