Django集成CKEditor提交HTMX表单时富文本字段修改无法保存

核心问题是CKEditor与HTMX的提交逻辑存在兼容断层：
CKEditor加载后会隐藏原生的<textarea>字段，单独渲染可视化编辑区域，编辑内容默认保存在JS实例内存中，仅在监听到原生表单submit事件时，才会自动把最新内容同步回对应的原生textarea供提交使用。但HTMX的无刷新提交是通过AJAX拦截表单请求实现的，不会触发原生表单的submit事件钩子，导致提交时CKEditor的最新编辑内容没有同步到表单字段，后端拿到的始终是textarea初始化时的旧值，自然无法保存修改。
另外你的模板存在一处结构错误：form-group类的div标签写在了字段循环外部，会导致表单字段渲染结构异常，但不是内容无法保存的核心诱因。

• 第一步：添加HTMX提交前的CKEditor内容同步逻辑
  在全局JS或者表单模板中加入以下脚本，监听HTMX的请求发起前置事件，提交前手动将对应表单内所有CKEditor实例的内容同步回原生textarea：

document.addEventListener('htmx:beforeRequest', function(evt) {
    const triggerEl = evt.detail.elt;
    if (triggerEl.tagName !== 'FORM') return;
    // 遍历所有CKEditor实例，同步当前提交表单内的编辑器内容
    Object.values(CKEDITOR.instances).forEach(editor => {
        if (triggerEl.contains(editor.element.$)) {
            editor.updateElement();
        }
    })
})

• 第二步：添加HTMX内容替换前的CKEditor实例销毁逻辑
  你当前用hx-swap='outerHTML'在提交后替换整个表单，旧的CKEditor实例不会被自动回收，会导致返回新表单后编辑器重复初始化、加载异常。加入以下脚本处理实例销毁：

document.addEventListener('htmx:beforeSwap', function(evt) {
    // 销毁即将被替换DOM区域内的CKEditor实例
    Object.values(CKEDITOR.instances).forEach(editor => {
        if (evt.detail.target.contains(editor.element.$)) {
            editor.destroy(true);
        }
    })
})

• 第三步：修正模板表单结构错误
  将form-group容器移入字段循环内部，保证每个字段被正确包裹，修正后的表单核心代码如下：

<form action='' method="POST" class="form" hx-post='' hx-swap='outerHTML'>
    {% csrf_token %}
    {{ form.media }}
    {% for field in form %}
    <div class="form-group">
        {{ field }}
    </div>
    {% endfor %}

    <br>
    <div class='htmx-indicator'>Loading...</div>
    <div class="text-center">
        <button class='htmx-inverted-indicator' type='submit'>Save</button>
    </div>
    
    {% if message %}
        <p>{{ message }}</p>
    {% endif %}
</form>

完成以上修改后，HTMX发起表单请求前会自动同步所有富文本字段的最新内容，后端request.POST可以正常接收到修改后的字段值，表单校验通过后即可正常保存内容，同时不会出现提交后编辑器加载异常的问题。

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