# Django CKEditor

***

**1. Basic CKEditor Integration**

```python
# 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**

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

**3. Model Integration with CKEditorField**

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

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

**4. File Uploading Configuration**

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

**5. Image Resizing**

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

**6. Customizing Image Upload Handler**

```python
# 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**

```python
# 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**

```python
# 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**

```python
# 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**

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

**11. Using CKEditor in Admin**

```python
# 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**

```python
# 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**

```python
# 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**

```python
# 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**

```python
# 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**

```python
# 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**

```python
# 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**

```python
# 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**

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

**20. Using CKEditor Plugins**

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

**21. Integrating with Django Rest Framework**

```python
# 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**

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

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

**23. Customizing Tooltips**

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

**24. Using CKEditor 4**

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

**25. Customizing Font Size**

```python
# 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**

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

**27. Customizing Enter Mode**

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

**28. Disable Style and Class Attributes**

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

**29. Using Read-Only Mode**

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

**30. Customizing Styles**

```python
# 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**

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

**32. Using Image Upload Adapter**

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

**33. Customizing Image Upload Handler**

```python
# 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**

```python
# settings.py
CKEDITOR_PLUGINS = 'mathjax'
```

**35. Integrating with TinyMCE**

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

**36. Using Code Snippet Plugin**

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

```