如何在Python Django中使用CKEditor5 CDN的代码块插件

核心问题原因 #

你当前使用的CKEditor 5官方预编译Classic版本默认未集成CodeBlock代码块插件，且配置中未将代码块按钮添加到工具栏，是功能不生效的两个核心原因。

解决步骤 #

1. 替换CDN资源为包含CodeBlock插件的版本

将原head中的CKEditor引入替换为全量预构建版本（包含所有官方插件）：

<head>
 <script src="https://cdn.ckeditor.com/ckeditor5/39.0.0/super-build/ckeditor.js"></script>
</head>

2. 修改初始化配置，明确指定插件和工具栏入口

初始化时需要手动引入CodeBlock插件，同时将代码块按钮加到工具栏：

ClassicEditor
.create( document.querySelector('#editor'), {
    // 明确指定需要加载的插件，可按需添加其他所需插件
    plugins: [ 'Essentials', 'Paragraph', 'Bold', 'Italic', 'CodeBlock' ],
    // 配置工具栏，加入代码块按钮
    toolbar: [ 'bold', 'italic', 'codeBlock' ],
    // 代码块自定义配置
    codeBlock: {
        languages: [
            { language: 'python', label: 'Python' },
            { language: 'javascript', label: 'JavaScript' },
            { language: 'html', label: 'HTML' }
        ]
    }
} )
.catch( error => {
    console.error( error );
} );

3. Django后端适配（必做）

如果提交后保存的内容代码块丢失，需要调整Django的XSS过滤规则，允许<pre>、<code>标签以及对应的class属性：

• 如果你使用了django-bleach做内容过滤，将pre、code加入BLEACH_ALLOWED_TAGS配置项，将class加入BLEACH_ALLOWED_ATTRIBUTES配置项
• 如果你使用自定义表单验证逻辑，不要过滤代码块相关的标签和属性

优化方案（可选） #

全量superbuild体积较大，如果不需要其他冗余插件，可以自定义构建仅包含所需插件的CKEditor包，打包后放到Django的static目录本地引入，加载速度更快。

内容的提问来源于stack exchange，提问作者최선민