为什么 Django-summernote 中的下拉菜单不起作用？答案

【问题标题】：Why doesn't the dropdown menu in Django-summernote work?为什么 Django-summernote 中的下拉菜单不起作用？
【发布时间】：2020-11-06 19:54:36
【问题描述】：

所以我有一个 Django 应用程序，我使用 django-summernote 作为编辑器。除下拉菜单外，编辑器中的一切正常。无论我单击向下箭头多少次，都没有任何变化。让我给你看代码：
设置.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' %}

其中一个可能是原因吗？

【问题讨论】：

标签： django summernote

【解决方案1】：

我知道可能导致您出现问题的几个原因：

在head 标签和{{ form.media }} 等位置重复导入（jQuery、Bootstrap 等）
你必须调用$("#content").summernote()和$('.dropdown-toggle').dropdown()来初始化

【讨论】：

首先非常感谢。我不认为＃2是原因，因为（a）在编辑器中一切正常，但下拉菜单，以及（b）我试过$('.dropdown-toggle').dropdown()但它没有用:(——所以我认为原因是#1，我已经发布（更新）了我在head 标签中的一些代码。你能检查一下吗？谢谢。:)
您确定{% load bootstrap4 %} 和{% bootstrap_javascript jquery='full' %} 是必要的吗？您已经包含了源代码。您提供的第一个代码块中的BOOTSTRAP4 = {'include_jquery':True,} 也是如此。