在 Blazor 中以富文本显示文本

Question

我将 Blazor 与富文本编辑器结合使用。当我输出这样的文本时：

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

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

Answer 1

这个问题是 Blazor 编译和呈现页面的方式的基础。这些组件在编译期间生成为类，然后使用 RenderTreeBuilder 再次生成 HTML。这反过来将您的输入作为字符串文字并输出它们，因为 blazor 在您的标记中看到的是 "insert string x into position y"，而不是实际的 HTML 标记。

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

MarkupRenderer.razor

@((MarkupString)Markup)

@code {

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

}

然后在你的 parent 中你可以这样使用它：

Parent.razor*


.....

<MarkupRenderer Markup="@markupString" />

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

关于此的官方文档非常简短，包括警告： "Rendering raw HTML constructed from any untrusted source is a security risk and should be avoided!"，就是这样，如果您还没有记住这一点，请记住这一点。

Answer 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);

在 Blazor 中以富文本显示文本

Display text in Blazor with rich text

richtext

blazor