Django Summernote bs5主题下Style等工具栏下拉按钮无法使用如何解决

架构老林

2026-9-23

解决步骤

1. 确认版本适配

首先升级django-summernote到0.8.20.0及以上版本，该版本才正式支持bs5主题，低版本对bs5的下拉组件适配存在原生缺陷：
pip install --upgrade django-summernote

2. 修正依赖加载顺序

Bootstrap5的下拉组件完全依赖Popper.js，你需要调整模板中静态资源的加载顺序，严格按照下面的优先级引入：

先引入jQuery
再引入Popper.js
再引入Bootstrap5 JS文件
最后引入{{ summernote.media }}
所有依赖建议下载到项目的static目录本地加载，避免外部资源加载异常。

3. 修正配置项写法

你之前将颜色可选值直接写在toolbar配置中的写法是错误的，toolbar仅用于定义按钮组结构，下拉可选值需要单独在同级配置项中声明。另外注意你贴的官方示例代码中['style', ['style'],末尾缺少右方括号，实际配置要修正语法错误，避免解析失败。正确的完整配置参考如下：

SUMMERNOTE_CONFIG = {
    'summernote': {
        'toolbar': [
            # 你的其他工具栏配置
            ['style', ['style']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['table', ['table']],
            # 你的其他工具栏配置
        ],
        # 单独声明各下拉项的可选值
        'styleTags': ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote'],
        'fontSizes': ['8', '9', '10', '11', '12', '14', '16', '18', '24', '36'],
        'colorButton': {
            'colors': [
                ['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF'],
                ['#FF0000', '#FF9C00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF'],
            ]
        },
    },
    # 你的其他django-summernote配置
    'SUMMERNOTE_THEME': 'bs5',
}