djangodjango-modelsdjango-templatesdjango-ckeditor

CKeditor not working on CreateVIew in Django


I've installed CKeditor and apply it to the models.py. I run the migrations and migrate it to DB. I tried to test it by going to the admin page. I can see that CKeditor is showing, but when I render it to my template using CreateView, it does not show.

Models.py

from django.db import models
from django.contrib.auth.models import User
from ckeditor.fields import RichTextField


class Content(models.Model):
    title = models.CharField(max_length=250)
    content = RichTextField(blank=True, null=True)
    date = models.DateField(auto_now_add=True)
    website = models.URLField()
    github = models.URLField()
    image = models.ImageField(upload_to=get_image_filename,
                              verbose_name='Image')

Forms.py

class ContentForm(forms.ModelForm):

    class Meta:
        model = Content
        fields = [
            'title',
            'content',
            'website',
            'github',
            'image',
        ]

Views.py

class CreateContentView(CreateView):
    form_class = ContentForm
    template_name = 'appOne/create_content.html'

Template

<form method="POST">{% csrf_token %}
    {{ form.text | safe }}
    {{ form.media }}
    <input type="submit" value="Save">
</form>

The weird thing is, in the Admin Page, the CKeditor works totally fine, but when I passed it to the template, the toolbar and menubar are not showing.


Solution

  • as the code from their github https://github.com/django-ckeditor/django-ckeditor#outside-of-django-admin yor form should look like

    from ckeditor.widgets import CKEditorWidget
    
    class ContentForm(forms.ModelForm):
        content = forms.CharField(widget=CKEditorWidget())
        class Meta:
            model = Content
            fields = [
                'title',
                'content',
                'website',
                'github',
                'image',
            ]
    

    and your template

    <form>
        {% csrf_token %}
        {{ form.text | safe }}
        {{ myform.media }}
        {{ myform.as_p }}
         <input type="submit" value="Save">
    </form>