ckeditor outside admin panel - django 3.1

Question

I'm trying to use CKEditor based on instructions in Django CKEditor — Django CKEditor 5.3.1 documentation.

it works just fine in the admin panel.

But outside the admin panel, I want to add it to a message section.

settings.py:

INSTALLED_APPS = [
    ...
    'ckeditor_uploader',
    'ckeditor',
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'cms/static')
]

# MEDIA Folder Settings

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

# CKEditor path
CKEDITOR_UPLOAD_PATH = "uploads/"
AWS_QUERYSTRING_AUTH = False
CKEDITOR_ALLOW_NONIMAGE_FILES = False
CKEDITOR_IMAGE_BACKEND = "pillow"

urls.py:

url(r'^ckeditor/', include('ckeditor_uploader.urls')),

base_site.html:

{% extends 'admin/base_site.html' %}

{% load static %}

{% block extrahead %}
<script>window.CKEDITOR_BASEPATH = '/static/ckeditor/ckeditor/';</script>
{{ block.super }}
{% endblock %}

To use it outside the admin panel I added the following configs.

models.py:

from ckeditor.fields import RichTextField
class Contact(models.Model):
    message = RichTextField(blank=True)

in base.html:

{% load static %}
<link rel="stylesheet" 
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css">

{% block content %}  {% endblock %}

<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="//cdn.ckeditor.com/4.15.1/basic/ckeditor.js"></script>

In a html file(contacts.html):

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

          <h3 class="mt-3"> New Message </h3>
          <hr>

          <form action="{% url 'contact' %}" method="POST">
            {% csrf_token %}        
            
            <div class="form-row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                    <div class="form-group">

                        <div class="row">
                            <div class="col-10 ml-auto">
                                <textarea   name="message" 
                                            id="message" 
                                            class="form-control" 
                                            required  ></textarea>
                                <input disabled></input>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
            
            <!-- Submit button -->
            <div class="form-row">
                <div class="col-12 mx-auto">
                    <div class="form-group">
                      <button class="btn btn-block" 
                              type="submit"
                              style="background: #b5b5b5;">
                              Send
                      </button>
                    </div>
                </div>
            </div>
            
          </form>

</div>

although I added those js files. but it doesn't render the CKEditor outside the admin panel.

any ideas?

Answer 1

Maybe this is not actual for you, but just 30 mins ago I face with the same problem.

This way didn't work for me:

<form action="" method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Save" />
</form>

But this one works:

<form action="" method="post">
    {% csrf_token %}
    {{ form.media }}
    {{ form.as_p }}
   <input type="submit" value="Save" />
</form>

So, I just added {{ form.media }}.

Answer 2

try to add this in your contacts.html

<script>
 CKEDITOR.replace( 'editor1' );
 CKEDITOR.config.allowedContent = true;
 CKEDITOR.config.removeFormatAttributes = '';
</script>