ASP.NET MVC中CKEditor验证错误回发后显示HTML标签问题

我之前也碰到过一模一样的场景，折腾了好久才找到根源——问题出在ASP.NET MVC的ModelState优先级机制上，和你解码/编码的操作本身关系不大。

问题根源分析 #

当表单提交触发验证错误回发时，你虽然在服务端把q.Text解码后返回视图，但Html.TextAreaFor这个辅助方法会优先读取ModelState中存储的原始提交值（也就是编码后的HTML），而不是你更新后的Model.Text值。这就导致CKEditor初始化时读取的是编码后的内容，自然会把HTML标签当成纯文本显示；而Html.Raw直接读取Model.Text，所以能正常渲染，这也印证了你的解码操作是有效的。

而从数据库加载现有内容的编辑场景之所以正常，是因为此时ModelState是空的，辅助方法会直接读取Model中的值，CKEditor能拿到正确的HTML内容进行渲染。

可行的解决方案 #

方案1：清除对应字段的ModelState条目

在服务端返回视图前，先清除ModelState中Text字段的记录，这样Html.TextAreaFor就会读取你解码后的Model.Text值：

if (!ModelState.IsValid) { 
    // 先清除ModelState中Text字段的旧值和错误
    ModelState.Remove("Text");
    q.Text = System.Net.WebUtility.HtmlDecode(q.Text); 
    return View(q); 
}

方案2：直接使用Html.TextArea绕过ModelState

如果不想操作ModelState，可以在视图中放弃Html.TextAreaFor，改用Html.TextArea直接传入解码后的Model值：

@Html.TextArea("Text", Model.Text, new { @class = "form-control" })

这样就能确保CKEditor初始化时拿到的是解码后的HTML内容。

方案3：手动给CKEditor设置数据

如果上面的方法都不想用，还可以在CKEditor初始化完成后，手动把解码后的内容赋值给编辑器：

$(document).ready(function () {
    CKEDITOR.replace('Text', { htmlEncodeOutput: true, enterMode: CKEDITOR.ENTER_BR });
    ckEditorInstance = CKEDITOR.instances.Text;
    ckEditorInstance.on('instanceReady', function () { 
        // 手动设置编辑器数据
        ckEditorInstance.setData('@Html.Raw(Model.Text)');
        UpdateTextArea(); 
    });
    ckEditorInstance.on('change', function () { UpdateTextArea(); });
});

注意这里要用@Html.Raw确保视图输出的是原始HTML，而不是编码后的文本。

额外小提示 #

你的Html.TextAreaFor的htmlAttributes写法有点小问题，规范写法应该是：

@Html.TextAreaFor(model => model.Text, new { @class = "form-control" })

不需要嵌套htmlAttributes键，直接传入属性对象即可，不过这个不影响CKEditor的功能，只是写法规范问题。

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