CODEWITHSUNDEEP
pythondjangockeditordjango-crispy-forms
Bibek Bhandari
Bibek Bhandari

Reputation: 422

How to display ckeditor in template django with crispy forms?

I have installed ckeditor for django and it is displayed in the admin as it should, but how do I make it display in my template.

template

{% extends 'blog/base.html' %} {% load crispy_forms_tags %}{%block content%} {% if user.is_superuser %}
<div class="container">
    <div class="row">

        <div class="col-md-6 col-md-7">
            <div class="panel panel-default">
                <div class="panel-body">
                    {% if error_message %}
                    <p><strong>{{ error_message }}</strong></p>
                    {% endif %}
                    <form class="form-horizontal" id="label-edit" role="form" action="" method="post" enctype="multipart/form-data">
                        {% csrf_token %} {{ form|crispy }}
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-success">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {% else %}
    <h1 class="display-4 text-center">404 Not Found</h1>
    {% endif %} {% endblock %}

I am using crispy forms. I want the ckeditor to appear on the template. Thanks in advance.

Upvotes: 1

Views: 2777

Answers (3)

Soufyane Hedidi
Soufyane Hedidi

Reputation: 87

To make CKEditor work outside the admin panel, you have to make sure all form media is present for the editor to work by doing this:

...
{{ form.media }}
{{ form.as_p }}
// or you can use crispy filter: {{ form|crispy }}
// you can specify the exactly field you want e.g form.content
{{ form.content }}
// you can use crispy without any problem: 
{{ form.content|as_crispy_field }}
...

sometimes, when using {{ form.media }} it wouldn't load the media and show an error (for me it gives me this error: Object of type PosixPath is not JSON serializable), so you have to load it manually in the form.html file (or whatever you call it e.g: blog_form.html) or the base.html file via <script> tag:

{% load static %}
...
<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"> 
</script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>

sometimes you have to mention where ckeditor will find its static files via CKEDITOR_BASEPATH in settings.py file:

STATIC_URL  = '/static/'
STATIC_ROOT = BASE_DIR / 'static_root'

# add this line
CKEDITOR_BASEPATH = STATIC_ROOT / "ckeditor" / "ckeditor"

check out CKEditor documentation for more

Upvotes: 0

Tina Y
Tina Y

Reputation: 31

You need to explicitly add {{ form.media }} so it looks like {{ form.media }} {{ form|crispy }}

Upvotes: 3

Alexander
Alexander

Reputation: 88

in your form class file add the following:

from ckeditor.widgets import CKEditorWidget

then you can use the CKEditorWidget like this:

content = forms.CharField(widget=CKEditorWidget())

for more information read the guide on the git page....

Upvotes: 1

Related Questions