Handling CKEditor 5 Content in Django Forms

To properly send CKEditor 5 content to your Django server and save it in your database, you need to make a few adjustments to your implementation. Here's how to handle this:

1. Add a Hidden Input Field to Your Form

First, you need to add a hidden input field to your form that will hold the CKEditor content:

HTMLCopied
<form method="post" enctype="multipart/form-data"> 
    {% csrf_token %}
    ...
    <div class="main-container">
        <div class="editor-container editor-container_classic-editor editor-container_include-block-toolbar" id="editor-container"> 
            <div class="editor-container__editor prose"> 
                <div id="editor"></div>
            </div>
        </div>
    </div>
    <!-- Add this hidden input field to store the editor content -->
    <input type="hidden" name="content" id="editor-content">
    <button type="submit">Submit</button>
</form>

2. Update Your JavaScript to Populate the Hidden Field

In your main.js file, you need to add code to populate the hidden field with the editor content when the form is submitted:

JAVASCRIPTCopied
// Assuming this is part of your main.js file
import { ClassicEditor } from 'ckeditor5';

// Initialize the editor
ClassicEditor
    .create(document.querySelector('#editor'))
    .then(editor => {
        // Store the editor instance
        window.editor = editor;
        
        // Get the form element
        const form = document.querySelector('form');
        
        // Add a submit event listener to the form
        form.addEventListener('submit', function() {
            // Get the editor content
            const editorContent = editor.getData();
            
            // Set the content to the hidden input field
            document.querySelector('#editor-content').value = editorContent;
        });
    })
    .catch(error => {
        console.error(error);
    });

3. Handle the Content in Your Form Class

Make sure your NewsCreateForm includes a field for the content:

PYTHONCopied
from django import forms
from .models import News

class NewsCreateForm(forms.ModelForm):
    class Meta:
        model = News
        fields = ['title', 'content', 'other_fields']  # Include all necessary fields

4. Model Considerations for Storing Rich Content

For your model, you should use a TextField to store the HTML content from CKEditor:

PYTHONCopied
from django.db import models

class News(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()  # This will store the HTML content
    # Other fields...

About Base64 Upload Adapter

The Base64 Upload Adapter converts images to base64-encoded strings and embeds them directly in the HTML content. This means:

1. Images are stored as part of the HTML text in your database
2. No separate file uploads are needed
3. The content can be displayed as-is without additional processing

However, be aware that:

• Base64-encoded images increase the size of your HTML content
• This approach is suitable for smaller images but may not be ideal for large files
• Your database size will grow faster with embedded images

Alternative Approach for Image Handling

If you prefer to store images separately:

1. Use a different upload adapter (like SimpleUploadAdapter)
2. Configure Django to handle file uploads
3. Modify your model to include image fields or use a related model for images

Complete Implementation Example

Here's a more complete example of how your JavaScript might look:

JAVASCRIPTCopied
import { ClassicEditor } from 'ckeditor5';

// Initialize the editor with your configuration
ClassicEditor
    .create(document.querySelector('#editor'), {
        // Your editor configuration
    })
    .then(editor => {
        // If you have existing content to load into the editor
        // For example, when editing an existing news item
        const existingContent = document.querySelector('#initial-content').value;
        if (existingContent) {
            editor.setData(existingContent);
        }
        
        // Handle form submission
        const form = document.querySelector('form');
        form.addEventListener('submit', function() {
            document.querySelector('#editor-content').value = editor.getData();
        });
    })
    .catch(error => {
        console.error('There was a problem initializing the editor:', error);
    });

This approach will allow you to capture the rich content from CKEditor and save it to your database using Django's ModelForm.