Search code examples
pythondjangodjango-rest-frameworkdjango-ckeditor

Django: how to add ckeditor plugins to my project using django


i want to add some plugins to my ckeditor django, i have installed the package using pip, installed it in settings.py and it's working now, but i want to add some more buttons to the ckeditor as all is have now is bold, align, media, emoji and some more , but i need some feature like code-snippets etc. so where should i add these plugins that i copied from the documentation https://django-ckeditor.readthedocs.io/en/latest/#installation

a11yhelp, about, adobeair, ajax, autoembed, autogrow, autolink, bbcode, clipboard, codesnippet,
codesnippetgeshi, colordialog, devtools, dialog, div, divarea, docprops, embed, embedbase,
embedsemantic, filetools, find, flash, forms, iframe, iframedialog, image, image2, language,
lineutils, link, liststyle, magicline, mathjax, menubutton, notification, notificationaggregator,
pagebreak, pastefromword, placeholder, preview, scayt, sharedspace, showblocks, smiley,
sourcedialog, specialchar, stylesheetparser, table, tableresize, tabletools, templates, uicolor,
uploadimage, uploadwidget, widget, wsc, xml

Solution

  • see the sample configuration and extraPlugins: https://django-ckeditor.readthedocs.io/en/latest/#example-ckeditor-configuration

    CKEDITOR_CONFIGS = {
        'default': {
            'skin': 'moono',
            # 'skin': 'office2013',
            'toolbar_Basic': [
                ['Source', '-', 'Bold', 'Italic']
            ],
    
    ...
    
            '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'
            ]),
        }
    }