"О теге "code" в поле RichText "Contentful dotnet SDK

RichText в Contentful десериализуется в тип Document, а Document преобразуется в тип MarkupString для использования. (Я создал метод расширения). При использовании тега «code» в Contentful RichTextEditor тег «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; }
    }
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
0
206
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Реализуйте собственный рендерер для текста:

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 управляет порядком, в котором оцениваются средства визуализации. Это означает, что этот пользовательский рендерер будет оцениваться раньше, чем по умолчанию.

Я смог создать полезный пользовательский рендерер на основе вашего кода. Большое спасибо.

Ethree 8ch 13.12.2020 06:17

Другие вопросы по теме