管理面板外的 ckeditor - django 3.1
ckeditor outside admin panel - django 3.1
我正在尝试根据 Django CKEditor — Django CKEditor 5.3.1 documentation 中的说明使用 CKEditor。
它在管理面板中工作得很好。
但在管理面板之外,我想将其添加到消息部分。
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 %}
为了在管理面板之外使用它,我添加了以下配置。
models.py
:
from ckeditor.fields import RichTextField
class Contact(models.Model):
message = RichTextField(blank=True)
在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>
在 html 文件中(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>
虽然我添加了那些js文件。但它不会在管理面板之外呈现 CKEditor。
有什么想法吗?
尝试将此添加到您的 contacts.html
<script>
CKEDITOR.replace( 'editor1' );
CKEDITOR.config.allowedContent = true;
CKEDITOR.config.removeFormatAttributes = '';
</script>
我正在尝试根据 Django CKEditor — Django CKEditor 5.3.1 documentation 中的说明使用 CKEditor。
它在管理面板中工作得很好。
但在管理面板之外,我想将其添加到消息部分。
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 %}
为了在管理面板之外使用它,我添加了以下配置。
models.py
:
from ckeditor.fields import RichTextField
class Contact(models.Model):
message = RichTextField(blank=True)
在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>
在 html 文件中(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>
虽然我添加了那些js文件。但它不会在管理面板之外呈现 CKEditor。
有什么想法吗?
尝试将此添加到您的 contacts.html
<script>
CKEDITOR.replace( 'editor1' );
CKEDITOR.config.allowedContent = true;
CKEDITOR.config.removeFormatAttributes = '';
</script>