在 Blazor 中使用富文本显示文本答案

【问题标题】：Display text in Blazor with rich text在 Blazor 中使用富文本显示文本
【发布时间】：2020-08-19 04:10:15
【问题描述】：

我正在使用带有富文本编辑器的 Blazor。当我输出这样的文本时：

它在文本和实际显示的标记 ID 周围添加引号：

我的标记用引号显示，而不显示实际标记（粗体和颜色）。有谁知道为什么或如何使用 Blazor 进行这项工作？

【问题讨论】：

我在 2018 年在 StackOverflow 上看到了这个相关问题。stackoverflow.com/questions/50604366/…

【解决方案1】：

这个问题是 Blazor 编译和呈现页面方式的基础。这些组件在编译期间构建为生成的类，然后使用 RenderTreeBuilder 再次生成 HTML。这反过来将您的输入变为字符串文字并按原样输出，因为 blazor 在您的标记中看到的是“将字符串 x 插入位置 y”，而不是实际的 HTML 标记。

编辑在我回答后不久，我发现了一个简单的方法，所以我把它放在这里，使用类型MarkupString。设置是这样完成的：

MarkupRenderer.razor

@((MarkupString)Markup)

@code {

    [Parameter]
    public string Markup { get; set; }

}

然后在你的父母中你像这样使用它：

Parent.razor*


.....

<MarkupRenderer Markup="@markupString" />

这将呈现您正在寻找的标签和属性，以将内容输出为 HTML。

这方面的官方文档非常简短，并且包含以下警告： “渲染从任何不受信任的来源构造的原始 HTML 是一种安全风险，应该避免！” 确实如此，所以如果您还没有这样做，请记住这一点。

【讨论】：

【解决方案2】：

我最终使用了 Markdig

<PackageReference Include="Markdig" Version="0.20.0" />

然后在我的 POCO 模型中包含一个未映射的字段：

[NotMapped]
public MarkupString HtmlQuestion { get; set; }

然后在我的服务层中添加了标记文本：

using Markdig;
...
q.HtmlQuestion = (MarkupString)Markdown.ToHtml(q.QuestionDescription);

【讨论】：