Resolve rich text content

  • javascript icon
    JavaScript
  • typescript icon
    TypeScript
  • dot-net icon
    .NET
  • java icon
    Java
  • php icon
    PHP
  • ruby icon
    Ruby
calendar icon
user iconMartina Farkasova, Jan Cerman
clock icon21 minutes
arrow-down-line iconDownload PDF
Apart from structured and formatted text, rich text elements can also contain references to content components and content items, and links to content items.Let’s see how to deal with these references so your rich text is displayed correctly.

How structured rich text helps you

One of the benefits of using an API-first CMS like Kontent.ai is that you’re able to clearly structure your content so it can be used in any channel. But you don’t want to be restricted to needing to know exactly what content will be included ahead of time. Structure is great, but your content creators want the freedom to add various amounts of various kinds of content. For this, you can add structure to your rich text with content components and linked items. The major difference between content components and linked items is that components exist only inside a single content item, while linked items can be reused across your project. You can read more about when to use components and when linked items. With Kontent.ai, you can link content items together in two ways:
  1. Using a linked items element – here, you can limit the items, including what types can be included and how many. Read how to retrieve linked content items.
  2. In a rich text element – here, your items are included within the text, which requires additional work from your app to render them. This way is covered here.
This article will look at how to add structure to your rich text through examples of components. For your rich text, the principle is the same for components and linked items. The items and components can be distinguished in the JSON response, but it's not necessary for these purposes. There are two ways to implement the structure on your front end:
  1. Defining resolvers for content types that might appear in the rich text.
  2. Using templates or specific views for structured blocks.
With most technologies, you can choose whether to take a global approach with resolvers or iterate over blocks, such as by making use of design templates for blocks within your app. Choosing to use a structured model can help ensure you don’t need to know what type of content is being added to your rich text, as your hierarchy will be created automatically.

Resolve items and components in rich text

This example shows how to resolve embedded content in articles. The tweets can be inserted either as components or content items. You can use this approach for any other type of structured content in your rich text elements. 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.
For the final HTML, you could also work with embedded tweets, such as by calling the Twitter APIarrow-right-top-square icon.

Resolve hyperlinks to content items

This example will show you how to resolve links to content item used within the body of articles. Without adjusting your application, any link in a rich text element that points to a content item will contain an empty value. Let’s see how to resolve such links correctly.
  • Develop with Kontent.ai
  • Manage API keys
  • Hello World
  • Hello Web Spotlight
  • Try sample apps
  • Build apps
  • Decide navigation and URLs
  • Environments
  • Get Developer Certification
light-bulb icon
Sign in
  • HTML
  • desktop-alt icon
  • Cheat sheets
  • Documentation
  • API reference
  • Product updates
Kontent.ai Learn
  • Plan
  • Set up
  • Model
  • Develop
  • Create
  • Generate models
  • Resolve rich text
  • Resolve linked content
  • Build your first app
Copyright © 2024 Kontent.aiarrow-right-top-square icon. All rights reserved.
  • Webarrow-right-top-square icon
  • Privacy policyarrow-right-top-square icon
  • Cookies policy
  • Consent settingsarrow-right-top-square icon
  • Securityarrow-right-top-square icon
  • GDPRarrow-right-top-square icon
Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!
<object type="application/kenticocloud" data-type="item" data-codename="my_tweet"></object>
  • Sign in

    • 1. Implement a tweet resolver

    To ensure your tweet is resolved exactly as you’d like it, create a Tweet resolver for rich text elements.

    2. Register the resolver

    Register the resolver to ensure it’s used.

    3. Retrieve the rich text

    Now that your app knows how to resolve strings that contain tweets in them, the tweet will be included in the body.

    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, in the case of live environments, 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

    You’ll need to register the resolver to ensure its use.

    4. Retrieve the article

    Now that your app knows how to resolve links, it’s enough to simply retrieve an article, and the links will be included inside the body.
  • How structured rich text helps you
  • Resolve items and components in rich text
  • Resolve hyperlinks to content items
    • PHP
    • PHP
    • PHP
    • PHP
    • PHP
    • PHP
    <?php
// Tip: Find more about PHP SDKs at https://kontent.ai/learn/php
class CustomLinkedItemsResolver implements InlineLinkedItemsResolverInterface
{
    public function resolveInlineLinkedItems($input, $item)
    {
        if(empty($item)){
            return $input; 
        }

        switch ($item->system->type) {
            case 'tweet':
                return "<blockquote class=\"twitter-tweet\" data-lang=\"en\" data-theme=\"".$item->elements->theme->value[0]->codename."\"><a href=\"".$item->elements->tweet_link->value."\"></a></blockquote>";
        }

        return $input;
    }
}
?>
    <?php
// Tip: Find more about PHP SDKs at https://kontent.ai/learn/php
$client = new DeliveryClient("<YOUR_ENVIRONMENT_ID>");
$client->inlineLinkedItemsResolver= new CustomLinkedItemsResolver(); 
?>
    <?php
// Tip: Find more about PHP SDKs at https://kontent.ai/learn/php
// Retrieves a content item named 'My article'
$item = $client->getItem('my_article');

// Retrieves text from the 'body' Rich text element
$description = $item->body;
?>
    <?php
// Tip: Find more about PHP SDKs at https://kontent.ai/learn/php
class CustomContentLinkUrlResolver implements ContentLinkUrlResolverInterface
{
    public function resolveLinkUrl($link)
    {
        // Resolves URLs to content items based on the Article content type
        if ($link->contentTypeCodeName == "my_article") {
            return "/articles/". $link->urlSlug;
        }

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

    public function resolveBrokenLinkUrl()
    {
        // Resolves URLs to unavailable content items
        return "/404";
    }    
}
?>
    <?php
// Tip: Find more about PHP SDKs at https://kontent.ai/learn/php
$client = new DeliveryClient("<YOUR_ENVIRONMENT_ID>");
$client->contentLinkUrlResolver = new CustomContentLinkUrlResolver(); 
?>
    <?php
// Tip: Find more about PHP SDKs at https://kontent.ai/learn/php
// Retrieves a content item named 'My article'
$item = $client->getItem('my_article');

// Retrieves text from the 'body' Rich text element
$description = $item->body;
?>