"About the "“Contentful dotnet SDK”的 RichText 字段中的“code”标签

"About the "code" tag in the RichText field of "Contentful dotnet SDK

Contentful中的RichText反序列化为Document类型,Document转为MarkupString类型使用。 (我创建了一个扩展方法)。 在Contentful的RichTextEditor中使用“code”标签时,父元素中不存在“pre”标签,因此换行和缩进会被浏览器忽略。

有没有办法将父元素添加到任何 HTML 标签?

        public static MarkupString ToHtml(this Document doc)
        {
            var renderer = new HtmlRenderer();
            var html = renderer.ToHtml(doc).GetAwaiter().GetResult();
            return (MarkupString)html;
        }

使用 Blazor ServerSide。

    <div>
        @entry.Content.ToHtml()
    </div>

型号

    public class ContentfulEntry
    {
        public SystemProperties Sys { get; set; }
        public string Title { get; set; }
        public Document Content { get; set; }
        public string Description { get; set; }
        public Asset Cover { get; set; }
    }

为文本实施自定义渲染器:

public class CustomTextRenderer : IContentRenderer
{
    /// <summary>
    /// The order of this renderer in the collection.
    /// </summary>
    public int Order { get; set; } = 90;

    /// <summary>
    /// Whether or not this renderer supports the provided content.
    /// </summary>
    /// <param name="content">The content to evaluate.</param>
    /// <returns>Returns true if the content is a textual node, otherwise false.</returns>
    public bool SupportsContent(IContent content)
    {
        return content is Text;
    }

    /// <summary>
    /// Renders the content to a string.
    /// </summary>
    /// <param name="content">The content to render.</param>
    /// <returns>The content as a string.</returns>
    public string Render(IContent content)
    {
        var text = content as Text;
        var sb = new StringBuilder();

        if (text.Marks != null)
        {
            foreach (var mark in text.Marks)
            {
                if(mark == "code">) {
                    sb.Append("<pre>");                    
                }
                  sb.Append($"<{MarkToHtmlTag(mark)}>");
            }
        }

        sb.Append(text.Value);

        if (text.Marks != null)
        {
            foreach (var mark in text.Marks)
            {
                sb.Append($"</{MarkToHtmlTag(mark)}>");
                if(mark == "code">) {
                    sb.Append("</pre>");                    
                }
            }
        }

        return sb.ToString();
    }

    private string MarkToHtmlTag(Mark mark)
    {
        switch (mark.Type)
        {
            case "bold":
                return "strong";
            case "underline":
                return "u";
            case "italic":
                return "em";
            case "code":
                return "code";
        }

        return "span";
    }

    /// <summary>
    /// Renders the content asynchronously.
    /// </summary>
    /// <param name="content">The content to render.</param>
    /// <returns>The rendered string.</returns>
    public Task<string> RenderAsync(IContent content)
    {
        return Task.FromResult(Render(content));
    }
}

然后将其添加到您的 HTML 渲染器渲染器集合中:

public static MarkupString ToHtml(this Document doc)
    {
        var renderer = new HtmlRenderer();
        renderer.AddRenderer(new CustomTextRenderer());
        var html = renderer.ToHtml(doc).GetAwaiter().GetResult();
        return (MarkupString)html;
    }

请注意,Order 属性 控制渲染器的评估顺序。这意味着这个自定义渲染器将在默认渲染器之前被评估。