Django Crispy Forms通过AJAX加载后TinyMCE编辑器不显示问题求助

核心问题原因 #

1. TinyMCE 默认仅在页面首次加载时扫描现有DOM完成编辑器渲染，AJAX动态插入的表单字段未被扫描，因此不会触发渲染。
2. 重复加载TinyMCE静态资源触发插件冲突，导致n.ui.isDisabled is not a function报错。
3. 手动添加async: False配置违反异步请求规范，触发同步XHR废弃警告，完全无助于问题解决。

可行解决方案 #

1. 修正静态资源加载逻辑

将TinyMCE相关静态资源统一放到发起AJAX请求的主页面<head>中全局加载，删除AJAX返回的表单模板中{{ form.media }}的引入代码，避免资源重复加载。

2. 修正forms.py字段配置错误

你当前把procedure字段定义在了Meta类内部，字段配置完全不生效，修正后的代码如下：

# 字段需定义在表单类下，Meta类仅存放模型关联配置
procedure = forms.CharField(widget=TinyMCE(attrs={'cols': 50, 'rows': 30}))

class Meta:
    model = NewProcedure
    exclude = ['created_by',]

def __init__(self, user, *args, **kwargs):
    User = get_user_model()
    super(CreateProcedureForm, self).__init__(*args, **kwargs)
    self.helper = FormHelper()
    self.helper.form_tag = False
    self.helper.layout = Layout(
        Div(
            HTML("<h1 class='title62'>Create New Procedure</h1>"),
            # Field参数仅需传字段名，无需重复定义widget
            Field('procedure'),
            Submit('submit', 'Submit'),
        )
    )

3. 修改AJAX请求逻辑

删除async: False配置，在表单插入DOM后手动调用TinyMCE初始化方法，修正后的代码如下：

$.ajax({
    method: 'post',
    headers: { "X-CSRFToken": token },
    url: "{% url 'Procedures:create_procedure' %}",
    processData: false,
    contentType: false,
    cache: false,
    data: formData,
    enctype: 'multipart/form-data',
    success: function (response) {
        if (response.success == true) {
            $('#id_username').alert("Hello");
        }
        else {
            $("#forms").replaceWith(response['form_html']);
            // 手动初始化新插入的TinyMCE字段
            tinymce.init({
                selector: '#id_procedure',
                cols: 50,
                rows: 30,
                // 其余配置可与你django-tinymce全局配置保持一致即可
            });
        }
    }, 
});

如果存在多个TinyMCE字段，可将selector参数修改为通用规则，比如textarea.tinymce批量匹配。

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