Django CKEditor

---

1. Basic CKEditor Integration

# settings.py
INSTALLED_APPS += ('ckeditor',)

# urls.py
from django.conf.urls import url
from django.views.generic import TemplateView

urlpatterns = [
    url(r'^$', TemplateView.as_view(template_name='index.html')),
]

# index.html

<div data-gb-custom-block data-tag="load"></div>

<script src="

<div data-gb-custom-block data-tag="static" data-0='ckeditor/ckeditor.js'></div>

"></script>
<textarea name="content" id="editor"></textarea>

<script>
    CKEDITOR.replace('editor');
</script>

2. Customizing CKEditor Configuration

# settings.py
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Full',
        'height': 300,
        'width': 300,
    },
}

3. Model Integration with CKEditorField

# models.py
from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField

class Post(models.Model):
    content = RichTextUploadingField()

4. File Uploading Configuration

# settings.py
CKEDITOR_UPLOAD_PATH = 'uploads/'
CKEDITOR_BROWSE_SHOW_DIRS = True

5. Image Resizing

# settings.py
CKEDITOR_IMAGE_BACKEND = 'pillow'
CKEDITOR_RESIZE_IMAGE_FILTER_QUALITY = 90

6. Customizing Image Upload Handler

# views.py
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
from ckeditor_uploader.backends import BaseImageUploadBackend

class MyImageUploadHandler(BaseImageUploadBackend):
    def upload(self, *args, **kwargs):
        response = super().upload(*args, **kwargs)
        response["name"] = "new-name.png"
        return response

# urls.py
@csrf_exempt
def upload_image(request):
    handler = MyImageUploadHandler()
    return handler.handle_request(request)

7. Customizing Widget CSS Class

# models.py
from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField

class Post(models.Model):
    content = RichTextUploadingField(widget_attrs={'class': 'my-rich-text-field'})

8. Customizing Widget Height

# models.py
from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField

class Post(models.Model):
    content = RichTextUploadingField(widget_attrs={'style': 'height: 400px;'})

9. Customizing Widget Toolbar

# models.py
from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField

class Post(models.Model):
    content = RichTextUploadingField(widget_attrs={'data-config': '{"toolbar": ""}'})

10. Using Static Toolbar

# settings.py
CKEDITOR_STATIC_TOOLBAR = ['Bold', 'Italic', 'Underline', 'Link', 'Undo', 'Redo']

11. Using CKEditor in Admin

# models.py
from django.db import models
from django.contrib import admin
from ckeditor_uploader.fields import RichTextUploadingField

class Post(models.Model):
    content = RichTextUploadingField()

# admin.py
from django.contrib import admin
from .models import Post

@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
    fields = ['content']

12. Customizing Admin CKEditor Configuration

# admin.py
from django.contrib import admin
from ckeditor_uploader.widgets import CKEditorUploadingWidget

class PostAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.TextField: {'widget': CKEditorUploadingWidget()}
    }

13. Using CKEditor with django-crispy-forms

# forms.py
from django import forms
from ckeditor_uploader.widgets import CKEditorUploadingWidget

class PostForm(forms.ModelForm):
    content = forms.CharField(widget=CKEditorUploadingWidget())

# views.py
from django.views.generic.edit import CreateView
from .forms import PostForm

class PostCreateView(CreateView):
    model = Post
    form_class = PostForm

14. Integrating CKEditor with django-bootstrap4

# forms.py
from django.forms import ModelForm
from bootstrap_datepicker_plus import DateTimePickerInput
from ckeditor_uploader.fields import RichTextUploadingField

class PostForm(ModelForm):
    content = RichTextUploadingField(widget=CKEditorUploadingWidget())

# views.py
from django.views.generic.edit import CreateView
from .forms import PostForm

class PostCreateView(CreateView):
    model = Post
    form_class = PostForm

15. Using CKEditor with django-tables2

# views.py
from django_tables2 import RequestConfig, SingleTableView

class PostTable(SingleTableView):
    model = Post
    template_name = 'table.html'

# table.html

<div data-gb-custom-block data-tag="load"></div>

<div data-gb-custom-block data-tag="load"></div>

<script src="

<div data-gb-custom-block data-tag="static" data-0='ckeditor/ckeditor.js'></div>

"></script>

<div data-gb-custom-block data-tag="for">

    

<div data-gb-custom-block data-tag="if" data-0='Content' data-1='Content' data-2='Content'>

        {{ field|render_field }}:
        <script>
            CKEDITOR.inline('{{ field.name }}');
        </script>
    

<div data-gb-custom-block data-tag="else"></div>

        {{ field }}
    

</div>

</div>

16. Integrating CKEditor with django-materialize

# forms.py
from django import forms
from materialize.forms import MaterializeModelForm
from ckeditor_uploader.widgets import CKEditorUploadingWidget

class PostForm(MaterializeModelForm):
    content = forms.CharField(widget=CKEditorUploadingWidget())

# views.py
from django.views.generic.edit import CreateView
from .forms import PostForm

class PostCreateView(CreateView):
    model = Post
    form_class = PostForm

17. Customizing CKEditor Toolbar

# init.js
CKEDITOR.replace('editor', {
    toolbar: [
        ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'],
        ['TextColor', 'BGColor', '-', 'PasteText', 'PasteFromWord'],
        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'Link', 'Unlink', 'Anchor', '-', 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
        ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt'],
        ['Maximize', 'ShowBlocks', '-', 'About']
    ],
});

18. Adding Custom Buttons

# init.js
CKEDITOR.replace('editor', {
    toolbar: [
        ['Bold', 'Italic', 'Underline', 'Copy', 'Paste'],
        ['Cut', 'Undo', 'Redo', 'Maximize', 'RemoveFormat']
    ],
    extraPlugins: 'copy',
    removeButtons: 'PasteText,PasteFromWord,Find,Replace,SelectAll,About',
});

19. Customizing Editor Skin

# init.js
CKEDITOR.replace('editor', {
    skin: 'moono-lisa',
});

20. Using CKEditor Plugins

# settings.py
CKEDITOR_PLUGINS = 'codesnippet,image2,uploadimage'

21. Integrating with Django Rest Framework

# serializers.py
from rest_framework import serializers
from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField

class PostSerializer(serializers.ModelSerializer):
    content = serializers.CharField(source='content.rendered')

    class Meta:
        model = Post
        fields = ['id', 'content', 'created_at', 'updated_at']

22. Using with django-nine

# settings.py
INSTALLED_APPS += ['nine']

# init.js
CKEDITOR.replace('editor', {
    uiColor: '#ffffff',
});

23. Customizing Tooltips

# init.js
CKEDITOR.replace('editor', {
    toolbar: [
        {
            name: 'document',
            items: ['Source', 'Maximize', 'Print'],
            tooltip: 'Document',
        }
    ],
});

24. Using CKEditor 4

# settings.py
CKEDITOR_PKG_URL = '//cdn.ckeditor.com/4.19.1/standard-all/ckeditor.js'

25. Customizing Font Size

# init.js
CKEDITOR.replace('editor', {
    fontSize_sizes: 'small/0.8em;normal/1em;big/1.5em;huge/2em',
    fontSize_defaultLabel: 'normal',
});

26. Using Advanced Content Filter

# init.js
CKEDITOR.replace('editor', {
    allowedContent: true,
});

27. Customizing Enter Mode

# init.js
CKEDITOR.replace('editor', {
    enterMode: CKEDITOR.ENTER_BR,
});

28. Disable Style and Class Attributes

# init.js
CKEDITOR.replace('editor', {
    disallowedContent: 'style:*{*}',
});

29. Using Read-Only Mode

# init.js
CKEDITOR.replace('editor', {
    readOnly: true,
});

30. Customizing Styles

# init.js
CKEDITOR.replace('editor', {
    stylesSet: [
        { name: 'Heading 1', element: 'h1' },
        { name: 'Heading 2', element: 'h2' },
        { name: 'Heading 3', element: 'h3' },
    ],
});

31. Using File Browser

# init.js
CKEDITOR.replace('editor', {
    filebrowserBrowseUrl: '/ckeditor/browse/',
});

32. Using Image Upload Adapter

# adapter.js
CKEDITOR.plugins.addExternal('uploadimage', '/static/ckeditor/plugins/uploadimage/plugin.js');

33. Customizing Image Upload Handler

# views.py
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
from ckeditor_uploader.backends import BaseImageUploadBackend

class MyImageUploadHandler(BaseImageUploadBackend):
    def upload(self, *args, **kwargs):
        response = super().upload(*args, **kwargs)
        response["name"] = "new-name.png"
        response["width"] = 300
        response["height"] = 200
        return response

# urls.py
@csrf_exempt
def upload_image(request):
    handler = MyImageUploadHandler()
    return handler.handle_request(request)

34. Using MathJax

# settings.py
CKEDITOR_PLUGINS = 'mathjax'

35. Integrating with TinyMCE

# settings.py
INSTALLED_APPS += ['tinymce']

36. Using Code Snippet Plugin

# settings.py
CKEDITOR_PLUGINS = 'codesnippet'
# init.js
CKEDITOR.replace('editor', {
    codeSnippet_theme: 'default',
});