ASP.NET中CkEditor与CodeMirror内容无法正常保存问题求助

核心问题原因 #

1. 两个textarea都绑定Content字段，DOM中存在多个name="Content"的表单元素，ASP.NET模型绑定时只会读取第一个匹配的元素值，切换到CodeMirror时自然获取不到正确内容。
2. 部分编辑器（如CodeMirror）不会实时同步内容到原生textarea，提交时textarea仍为空值。

分步解决方案 #

1. 保证DOM中仅存在一个绑定Content的表单元素

不要同时渲染两个textarea，根据当前选中的ContentType动态渲染对应编辑器容器，或切换时替换现有元素：

视图代码（Razor）：

@model StaticInformationModel

<form asp-action="Save" method="post">
    <div>
        <label>选择编辑器：</label>
        <select asp-for="ContentType" onchange="switchEditor(this.value)">
            <option value="@((int)ContentType.CkEditor)">CkEditor</option>
            <option value="@((int)ContentType.CodeMirror)">CodeMirror</option>
        </select>
    </div>

    <div id="editorContainer">
        @* 初始根据模型的ContentType渲染对应编辑器 *@
        @if (Model.ContentType == ContentType.CkEditor)
        {
            <textarea asp-for="Content" id="ckEditor"></textarea>
        }
        else
        {
            <textarea asp-for="Content" id="codeMirror"></textarea>
        }
    </div>

    <button type="submit">保存</button>
</form>

JS切换逻辑：

function switchEditor(contentType) {
    const container = document.getElementById('editorContainer');
    // 保存当前编辑器内容，避免切换丢失
    const currentContent = document.querySelector('[name="Content"]')?.value || '';
    
    // 清空容器并创建新的textarea
    container.innerHTML = '';
    const textarea = document.createElement('textarea');
    textarea.name = 'Content';
    textarea.id = contentType === '0' ? 'ckEditor' : 'codeMirror';
    textarea.value = currentContent;
    container.appendChild(textarea);
    
    // 重新初始化编辑器
    if (contentType === '0') {
        ClassicEditor.create(textarea); // 初始化CkEditor
    } else {
        CodeMirror.fromTextArea(textarea, {
            mode: 'text/plain', // 根据需求设置语法模式
            lineNumbers: true
        }); // 初始化CodeMirror
    }
}

2. 表单提交前强制同步编辑器内容到textarea

多数编辑器会独立维护内容，不会自动同步到原生textarea，需在提交前手动同步：

JS提交事件处理：

document.querySelector('form').addEventListener('submit', function(e) {
    const contentType = document.querySelector('[name="ContentType"]').value;
    
    if (contentType === '0') {
        // 同步CkEditor内容到textarea
        const editor = ClassicEditor.instances.ckEditor;
        if (editor) editor.updateSourceElement();
    } else {
        // 同步CodeMirror内容到textarea
        const textarea = document.getElementById('codeMirror');
        if (textarea) {
            const editor = CodeMirror.fromTextArea(textarea);
            editor.save();
        }
    }
});

3. 验证模型与控制器绑定

确保模型类属性可正常绑定，控制器Action正确接收参数：

模型类代码：

public enum ContentType
{
    CkEditor = 0,
    CodeMirror = 1
}

public class StaticInformationModel
{
    public int Id { get; set; }
    [Required]
    public string Content { get; set; }
    public ContentType ContentType { get; set; }
}

控制器Action代码：

[HttpPost]
public IActionResult Save(StaticInformationModel model)
{
    if (!ModelState.IsValid) return View(model);
    
    // 转换为实体类并保存到数据库
    var entity = new StaticInformation
    {
        Id = model.Id,
        Content = model.Content,
        ContentType = model.ContentType
    };
    
    _dbContext.StaticInformations.Update(entity);
    _dbContext.SaveChanges();
    
    return RedirectToAction("Index");
}

4. 调试排查

如果仍有问题，用浏览器F12开发者工具查看POST请求的Form Data：

• 切换到Network标签，提交表单后找到对应请求
• 查看Form Data部分，确认Content和ContentType的值是否与当前选择的编辑器匹配

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