Django-CKEditor5源码编辑功能失效问题求助

问题现象 #

• 在Django后台使用CKEditor5的「源码编辑」功能插入HTML代码后，样式无法生效
• 再次切换回源码视图，插入的HTML代码会被自动修改（原截图显示带样式的代码结构被变更）

已尝试操作 #

已参照CKEditor5官方的GeneralHtmlSupport方案进行配置，但问题未解决

当前CKEditor配置代码 #

ClassicEditor.create(
    editorEl,
    config,
    {
        plugins: [GeneralHtmlSupport, SourceEditing, Undo, Alignment, Image, ImageResizeEditing, ImageResizeHandles],
        htmlSupport: {
            allow: [
                {
                    name: /.*/,
                    attributes: true,
                    classes: true,
                    styles: true
                }
            ]
        },
        image: {
            resizeUnit: "%",
            styles: {
                options: [
                    { name: 'Resize', title: 'Resize', className: 'Resize' },
                ]
            },
        },
        htmlSupport: true,
        allowedContent: true
    }
).then(editor => {
    const textarea = document.querySelector(`#${editorEl.id}`);

    editor.model.document.on('change:data', () => {
        textarea.value = editor.getData();
    });
    if (editor.plugins.has('WordCount')) {
        const wordCountPlugin = editor.plugins.get('WordCount');
        const wordCountWrapper = element.querySelector(`#${script_id}-word-count`);
        wordCountWrapper.innerHTML = '';
        wordCountWrapper.appendChild(wordCountPlugin.wordCountContainer);
    }
    editors[editorEl.id] = editor;
    if (callbacks[editorEl.id]) {
            callbacks[editorEl.id](editor);
        }
}).catch(error => {
    console.error((error));
});
editorEl.setAttribute('data-processed', '1');
});
window.editors = editors;

解决步骤 #

• 移除配置冲突项：配置中重复定义了htmlSupport属性，删除后面的htmlSupport: true，否则详细的HTML支持规则会被覆盖，导致自定义配置失效。
• 确认插件加载正确性：确保GeneralHtmlSupport插件已正确安装，并且在Django的CKEDITOR5_CONFIGS配置中正确声明该插件。
• 优化HTML支持规则：如果需要更精准的样式控制，可以明确指定允许的样式属性，避免通配符可能带来的解析问题：

  htmlSupport: {
      allow: [
          {
              name: /.*/,
              attributes: true,
              classes: true,
              styles: 'color|font-size|text-align|margin|padding|background-color'
          }
      ]
  }
  

• 处理前端渲染转义：在Django模板中渲染CKEditor输出的内容时，使用|safe过滤器避免HTML被自动转义，确保样式正常生效：{{ your_content_field|safe }}

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