时间戳

首页 > 解决方案 > 为什么 Django-summernote 中的下拉菜单不起作用？

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

问题描述

所以我有一个 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' %}

其中之一可能是原因吗？

标签： djangosummernote

解决方案

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

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

推荐阅读