如何在Blazor的字段中正确渲染HTML内容？

问题分析 #

你遇到的核心问题是数据库中存储的HTML内容已经被HTML实体转义（比如<p>被转成了<p>），所以即便使用HtmlString输出，浏览器仍会把转义后的实体当作纯文本显示，而非解析成HTML标签。

临时解决方法（渲染时处理） #

如果暂时无法修改数据存储逻辑，可在渲染环节先对内容进行HTML解码，再用HtmlString输出：

ASP.NET Framework 版本 #

<td>
    @(new HtmlString(System.Web.HttpUtility.HtmlDecode(objInv.Notes)))
</td>

.NET Core/.NET 5+ 版本 #

<td>
    @(new HtmlString(System.Net.WebUtility.HtmlDecode(objInv.Notes)))
</td>

根源解决方法（修改TinyMCE配置） #

从源头避免内容被转义，调整TinyMCE的entity_encoding配置，让编辑器提交原始HTML标签而非转义后的实体：

tinymce.init({
  selector: 'textarea',
  entity_encoding: 'raw' // 设置为raw，提交未转义的原始HTML
});

修改后，存入数据库的内容会是原始的<p>New laptops 09/07/2022 <strong>test</strong></p>，后续直接用@Html.Raw(objInv.Notes)或者@(new HtmlString(objInv.Notes))就能正常渲染解析。

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