Software Solutions Company

Django Ckeditor Deployment

Oct. 18, 2022
Author: Asif Shahzad | Full Stack Web Developer

CKEditor is a WYSIWYG HTML editor that can fit a wide range of use cases, from Word-like documents with large toolbars to simple toolbars with a limited Django admin CKEditor integration. Provides a RichTextField , RichTextUploadingField , CKEditorWidget and CKEditorUploadingWidget utilizing CKEditor. I customize this editor like Microaoft Office.

Here are the steps:

pip install django-ckeditor



description = RichTextField(blank=True, null=True)

Change field


from ckeditor.fields import RichTextField

In add





In add


{% csrf_token %}



In templates add



After that run


python manage

python makemigrations

python migrate

python runserver

For image in style


max-width: 100%;height: auto !important;

For more options add in

# CKEditor Config ---------------------------------------------
    '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']},
            '/', # put this to force next toolbar on new line
            {'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},
            {'name': 'colors', 'items': ['TextColor', 'BGColor']},            
            {'name': 'insert', 'items': ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe']},
            {'name': 'tools', 'items': ['Maximize', 'ShowBlocks']},
            {'name': 'yourcustomtools', 'items': ['Preview', ]},
            {'name': 'about', 'items': ['About']},
            {'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': 'extra', 'items': ['CodeSnippet', 'Mathjax', 'Embed', ],},
            {'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},
        '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': '//',
        # ----------------------------------
        # Class used inside span to render mathematical formulae using latex
        'mathJaxClass': 'mathjax-latex',

        # Mathjax library link to be used to render mathematical formulae
        'mathJaxLib': '',
        'tabSpaces': 4,
        'extraPlugins': ','.join([
            'uploadimage', # the upload image feature
            # your extra plugins here
            # 'devtools',
            'mathjax',  # Used to render mathematical formulae
            'codesnippet',  # Used to add code snippets
            'image2',  # Loads new and better image dialog
            'embed',  # Used for embedding media (YouTube/Slideshare etc)
            'tableresize',  # Used to allow resizing of columns in tables
# CKEditor Config ---------------------------------------------

CKEditor will look like the image below:

Please share this page to friends.

Asif Shahzad | Full Stack Web Developer

Welcome to our Software Solutions Company, where we excel in transforming ideas into tangible realities. We have expertise in developing online management systems, website designing & development, software solutions, mobile app development, e-commerce solutions and graphic designing. We provide 24/7 services.

Popular Posts

Call To Action

Do you Need a website?

Order Now