为什么 Django-summernote 中的下拉菜单不起作用?
Why doesn't the dropdown menu in Django-summernote work?
所以我有一个 Django 应用程序,我使用 django-summernote
作为编辑器。除了下拉菜单外,编辑器中的一切都运行良好。无论我点击向下箭头多少次,都没有任何变化。让我告诉你代码:
settings.py
SUMMERNOTE_CONFIG = {
'iframe': True,
'lang' : 'ko-KR',
'summernote': {
'width': '100%',
'height': '450px',
'placeholder':'위대한 글은 위대한 첫 문장에서 시작됩니다!',
'toolbar': [
['style', ['style',]],
['font', ['fontsize', 'bold', 'italic', 'strikethrough']], # 'fontname', 'clear', ...
['color', ['forecolor', ]], # 'backcolor'
['para', ['ul', 'ol', 'height']],
['insert', ['link']],
['misc', ['fullscreen', 'print', 'help', ]], # 'codeview', 'picture' ...
],
},
'js': (
'/static/summernote-ext-print.js',
),
'js_for_inplace': (
'/static/summernote-ext-print.js',
),
'css': (
'//cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/theme/base16-dark.min.css',
),
'css_for_inplace': (
'//cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/theme/base16-dark.min.css',
),
'codemirror': {
'theme': 'base16-dark',
'mode': 'htmlmixed',
'lineNumbers': 'true',
},
'lazy': False,
}
BOOTSTRAP4 = {
'include_jquery': True,
}
SUMMERNOTE_THEME = 'bs4'
X_FRAME_OPTIONS = 'SAMEORIGIN'
# I'm not really sure what brought me these settings below... Might be related to django-summernote?
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# 'djangobower.finders.BowerFinder'
]
BOWER_COMPONENTS_ROOT = '/PROJECT_ROOT/components/'
BOWER_INSTALLED_APPS = (
'jquery',
'jquery-ui',
'bootstrap'
)
# All the STATIC and MEDIA settings are fine.
模板
...
{% autoescape off %}
<div class="row">
<div class="col col-12 input-content">
{{form.media}}
{{form.contents|as_crispy_field|safe}}
</div>
</div>
{% endautoescape %}
...
您认为问题出在哪里?除了下拉菜单之外的所有内容都可以正常工作。如果您需要更多信息,请告诉我。非常感谢您:)
+++
供您参考,这些是我标签中的内容。
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
{% load bootstrap4 %}
{% bootstrap_javascript jquery='full' %}
其中之一可能是原因吗?
我知道有几种可能导致您遇到问题的原因:
- 在
head
标签和 {{ form.media }}
等地方重复导入(jQuery、Bootstrap 等)
- 你必须调用
$("#content").summernote()
和$('.dropdown-toggle').dropdown()
来初始化
所以我有一个 Django 应用程序,我使用 django-summernote
作为编辑器。除了下拉菜单外,编辑器中的一切都运行良好。无论我点击向下箭头多少次,都没有任何变化。让我告诉你代码:
settings.py
SUMMERNOTE_CONFIG = {
'iframe': True,
'lang' : 'ko-KR',
'summernote': {
'width': '100%',
'height': '450px',
'placeholder':'위대한 글은 위대한 첫 문장에서 시작됩니다!',
'toolbar': [
['style', ['style',]],
['font', ['fontsize', 'bold', 'italic', 'strikethrough']], # 'fontname', 'clear', ...
['color', ['forecolor', ]], # 'backcolor'
['para', ['ul', 'ol', 'height']],
['insert', ['link']],
['misc', ['fullscreen', 'print', 'help', ]], # 'codeview', 'picture' ...
],
},
'js': (
'/static/summernote-ext-print.js',
),
'js_for_inplace': (
'/static/summernote-ext-print.js',
),
'css': (
'//cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/theme/base16-dark.min.css',
),
'css_for_inplace': (
'//cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/theme/base16-dark.min.css',
),
'codemirror': {
'theme': 'base16-dark',
'mode': 'htmlmixed',
'lineNumbers': 'true',
},
'lazy': False,
}
BOOTSTRAP4 = {
'include_jquery': True,
}
SUMMERNOTE_THEME = 'bs4'
X_FRAME_OPTIONS = 'SAMEORIGIN'
# I'm not really sure what brought me these settings below... Might be related to django-summernote?
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# 'djangobower.finders.BowerFinder'
]
BOWER_COMPONENTS_ROOT = '/PROJECT_ROOT/components/'
BOWER_INSTALLED_APPS = (
'jquery',
'jquery-ui',
'bootstrap'
)
# All the STATIC and MEDIA settings are fine.
模板
...
{% autoescape off %}
<div class="row">
<div class="col col-12 input-content">
{{form.media}}
{{form.contents|as_crispy_field|safe}}
</div>
</div>
{% endautoescape %}
...
您认为问题出在哪里?除了下拉菜单之外的所有内容都可以正常工作。如果您需要更多信息,请告诉我。非常感谢您:)
+++
供您参考,这些是我标签中的内容。
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
{% load bootstrap4 %}
{% bootstrap_javascript jquery='full' %}
其中之一可能是原因吗?
我知道有几种可能导致您遇到问题的原因:
- 在
head
标签和{{ form.media }}
等地方重复导入(jQuery、Bootstrap 等)
- 你必须调用
$("#content").summernote()
和$('.dropdown-toggle').dropdown()
来初始化