Resolve rich text content | Kontent.ai Learn

Your content creators can put all sorts of content in rich text elements. This is where most of your longer-form content lives, and it must be displayed correctly. Learn how to resolve Kontent.ai-specific entities, such as content items and components in rich text, so that your content always looks as intended.

What can go in rich text?

When working in the Kontent.ai rich text editor, your content creators need the freedom to add various types of content. This spans native options such as formatted text structured with headings, lists, and tables to custom content specific to your project. For example, content such as disclaimers, tweets, or videos is something you define yourself. To add these kinds of custom content, content creators can insert either new components or existing content items within the rich text element. Then, based on the content types of the components or content items, your app can decide how to display them. The same goes for linking to other content items within the rich text element. Your app needs to decide how to resolve each link. For example, you might want to use specific routing logic for different types of content items.

Resolve inserted content items and components

Resolve content item links

What can go in rich text?

Resolve inserted content items and components

Resolve content item links

Let’s see how to resolve tweets inserted into rich text in articles. Rest assured, you can use this approach for any other type of structured content.If you don’t adjust your application, any content item or component inserted in rich text elements resolves to an empty object reference, which won’t be rendered on the page.

1. Implement a tweet resolver

To ensure your tweet is displayed exactly as you want, create a Tweet resolver.

2. Register the resolver

3. Retrieve the rich text

When your app knows how to resolve strings with tweets in them, it automatically resolves the tweet in the article body.

For the final HTML, you can also work with embedded tweets, such as by calling the Twitter API

Let’s see how to resolve links to content items used within the body of articles. With proper resolution logic, any content item link will resolve to the right URL.

1. Define a model

If you’re using strongly typed models, add a model for each type of content item you want to link within rich text.

2. Implement a resolver

To ensure your links are resolved correctly, you need to implement a resolver with two methods:

The first method will return the URL of an available item.
The second method will return a 404 Not found error when the linked item is not available.

A content item is unavailable when deleted or unpublished.

When building the resolver logic, you can use the link parameter to get more information about the linked content items.

3. Register the resolver

4. Retrieve the article

Once your app knows how to resolve links, you can retrieve an article, and the content item links will be included inside the article body.

The content item link in the rich text element is now correctly resolved to a valid URL.

1. Implement a tweet resolver

To ensure your tweet is displayed exactly as you want, create a Tweet resolver.

2. Register the resolver

3. Retrieve the rich text

When your app knows how to resolve strings with tweets in them, it automatically resolves the tweet in the article body.

For the final HTML, you can also work with embedded tweets, such as by calling the Twitter API

Let’s see how to resolve links to content items used within the body of articles. With proper resolution logic, any content item link will resolve to the right URL.

1. Define a model

If you’re using strongly typed models, add a model for each type of content item you want to link within rich text.

2. Implement a resolver

To ensure your links are resolved correctly, you need to implement a resolver with two methods:

The first method will return the URL of an available item.
The second method will return a 404 Not found error when the linked item is not available.

A content item is unavailable when deleted or unpublished.

When building the resolver logic, you can use the link parameter to get more information about the linked content items.

3. Register the resolver

4. Retrieve the article

Once your app knows how to resolve links, you can retrieve an article, and the content item links will be included inside the article body.

The content item link in the rich text element is now correctly resolved to a valid URL.

Expect the unexpectedRich text elements can be limited to contain content based on specific content types. As a result, if content creators insert or link to content items based on the wrong type, they get validation errors. This prevents them from publishing invalid content. However, they can still create invalid content while crafting their drafts. Make sure your app can safely deal with unknowns such as unexpected types of content. While published content will be valid, the latest content might not.

<p>The used coffee grounds are retained in the filter, while the <a href="/articles/which-brewing-fits-you" data-item-id="65832c4e-8e9c-445f-a001-b9528d13dac8">brewed coffee</a> is collected in a vessel such as a carafe or pot.</p>

public class TweetResolver : IInlineContentItemsResolver<Tweet>
    {
        public string Resolve(Tweet data)
        {
            return
                $"<blockquote class=\"twitter-tweet\" data-lang=\"en\" data-theme=\"{data.Theme}\"><a href=\"{data.TweetLink}\"></a></blockquote>";
        }
    }

// You can also register it in IServiceCollection or another framework for dependency injection: https://github.com/kontent-ai/delivery-sdk-net/blob/master/docs/customization-and-extensibility/rich-text/string-based-linked-items-rendering.md#registering-a-resolver

using Kontent.Ai.Delivery;
using Kontent.Ai.Delivery.InlineContentItems;

IDeliveryClient client = DeliveryClientBuilder
    .WithProjectId("<YOUR_ENVIRONMENT_ID>")
    // Registers a content item resolver for tweets
    .WithInlineContentItemsResolver(new TweetResolver())
    // Registers the generated strongly typed models
    .WithTypeProvider(new CustomTypeProvider())
    .Build();

IDeliveryItemResponse response = await client.GetItemAsync<SimpleArticle>("my_article");
SimpleArticle simpleArticle = response.Item;

string simpleArticleBody = simpleArticle.Body;

public class CustomContentLinkUrlResolver : IContentLinkUrlResolver
{
    public Task<string> ResolveLinkUrlAsync(IContentLink link)
    {
        // Resolves URLs to content items based on the Article content type
        if (link.ContentTypeCodename == "article")
        {
            return Task.FromResult($"/articles/{link.UrlSlug}");
        }

        // TODO: Add the rest of the resolver logic
    }

    public Task<string> ResolveBrokenLinkUrlAsync()
    {
        // Resolves URLs to unavailable content items
        return Task.FromResult("/404");
    }
}

// You can also register the resolver in IServiceCollection or another framework for dependency injection: https://kontent.ai/learn/net-register-resolver
using Kontent.Ai.Delivery;

IDeliveryClient client = DeliveryClientBuilder
    .WithProjectId("<YOUR_ENVIRONMENT_ID>")
    // Registers the resolver
    .WithContentLinkUrlResolver(new CustomContentLinkUrlResolver())
    .Build();

IDeliveryItemResponse response = await client.GetItemAsync<SimpleArticle>("my_article");
SimpleArticle simpleArticle = response.Item;

string simpleArticleBody = simpleArticle.Body;