Django CKEditor添加Youtube插件后工具栏图标不显示如何解决

解决方案 #

你缺少插件加载的相关配置，以及需要确认静态文件路径配置正确，按以下步骤修改即可：

1. 补充CKEditor插件加载配置 #

在settings.py的CKEDITOR_CONFIGS的special节点中，新增额外插件加载配置：

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Custom',
        "removePlugins": "stylesheetparser",
        'toolbar_Custom': [
             ['Bold', 'Link', 'Unlink', 'Image'],
         ],
    },
    'special':
        {
            'toolbar': 'Special',
            'enterMode': 2,
            'height': 500,
            'width': 1100,
            "removePlugins": "stylesheetparser",
            'extraAllowedContent': 'iframe[*]',
            # 新增以下2行配置
            'extraPlugins': 'youtube',
            'external_plugin_path': {'youtube': '/static/ckeditor/ckeditor/plugins/youtube/'},
            'toolbar_Special':
            [
            ......
            {
                'name': 'youtube',
                'items': ['Youtube',]
            },
            ],
         }
}

2. 确认静态文件路径配置正确 #

你存放插件的目录需要被Django识别为静态文件目录：

• 将你创建的ckeditor/ckeditor/plugins/youtube/目录移动到项目根目录的static目录下，最终路径为项目根目录/static/ckeditor/ckeditor/plugins/youtube/
• 在settings.py中添加静态文件目录配置：

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

3. 生效配置的校验步骤 #

• 开发环境：确保DEBUG = True，且django.contrib.staticfiles已加入INSTALLED_APPS，清空浏览器缓存后强制刷新页面即可
• 生产环境：执行python manage.py collectstatic收集所有静态文件到部署指定的静态资源目录，再刷新页面
• 若仍不显示，可检查下载的YouTube插件版本是否和当前django-ckeditor内置的CKEditor4版本兼容，或查看插件目录下plugin.js中注册的按钮名称是否和你工具栏配置的Youtube大小写一致

内容的提问来源于stack exchange，提问作者Frendom