Contentful의 RichText는 문서 유형으로 역 직렬화되고 문서는 사용을 위해 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속성이 렌더러가 평가되는 순서를 제어합니다. 이는이 커스텀 렌더러가 기본 렌더러보다 먼저 평가된다는 것을 의미합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다