Resolve rich text content | Kontent.ai Learn

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:

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.
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:

Defining resolvers for content types that might appear in the rich text.
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 API

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.

How structured rich text helps you

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.
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.

Defining resolvers for content types that might appear in the rich text.
Using templates or specific views for structured blocks.

Resolve items and components in rich text

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

Resolve hyperlinks to content items

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>

To ensure your tweet component is resolved exactly as you want, you need to define the HTML markup for the tweet in your rich text resolver.The SDK provides the resolveRichText() function with the contentItemResolver parameter for resolving content components and items inserted in the rich text element. Within the contentItemResolver, you need to specify how to resolve components or items of a given type. In this example, you specify how to resolve tweets.

You can also see the resolvers in our sample React

and Vue

applications.

To resolve hyperlinks that point to content items, you need to implement a rich text URL resolver in your code.For resolving hyperlinks to content items in the rich text element, the SDK provides the resolveRichText() function with the urlResolver parameter. Within the urlResolver, you need to specify how to resolve links to items of a given type. In this example, you specify how to resolve links to articles.

You can also see the resolvers in our sample React

and Vue

applications.

// Tip: Find more about JS/TS SDKs at https://kontent.ai/learn/javascript
import { createRichTextHtmlResolver, Elements, createDeliveryClient, linkedItemsHelper, IContentItem } from '@kontent-ai/delivery-sdk';

const deliveryClient = createDeliveryClient({
  environmentId: '<YOUR_ENVIRONMENT_ID>'
});

// Tip: Create strongly typed models according to https://kontent.ai/learn/strongly-typed-models
export type Article = IContentItem<{
  title: Elements.TextElement;
  body: Elements.RichTextElement;
}>;

// Gets your content item with the rich text element
const response = await deliveryClient.item<Article>('my_article')
  .toPromise();

// Gets the contents of the rich text element
const richTextElement = response.data.item.elements.body;

// Note: The code below executes correctly in browser. To adjust the code for nodejs, see https://kontent.ai/learn/js-rte-nodejs
// Defines how to resolve the rich text element
const resolvedRichText = createRichTextHtmlResolver().resolveRichText({
  // Gives the resolver the contents of your rich text
  element: richTextElement,
  // Points the resolver to the content items and components that might be used in the rich text element
  linkedItems: linkedItemsHelper.convertLinkedItemsToArray(response.data.linkedItems),
  contentItemResolver: (itemId, contentItem) => {
    // For tweet items and components, resolves to the following HTML markup
    if (contentItem && contentItem.system.type === 'tweet') {
      return {
        contentItemHtml: `<blockquote class="twitter-tweet" data-lang="en" data-theme="${contentItem.elements.theme.value}"><a href="${contentItem.elements.tweetLink.value}"></a></blockquote>`
      };
    }

    // For other type of items and components, resolves to an empty string
    return {
      contentItemHtml: `<div>Unsupported type ${contentItem.system.type}</div>`
    };
  }
});

// Gets the resolved HTML content of your rich text
const resolvedRichTextHtml = resolvedRichText.html;

// Tip: Find more about JS/TS SDKs at https://kontent.ai/learn/javascript
import { createRichTextHtmlResolver, Elements, createDeliveryClient, linkedItemsHelper, IContentItem } from '@kontent-ai/delivery-sdk';

// Initializes the Delivery client
const deliveryClient = createDeliveryClient({
  environmentId: '<YOUR_ENVIRONMENT_ID>'
});

// Tip: Create strongly typed models according to https://kontent.ai/learn/strongly-typed-models
export type Article = IContentItem<{
  title: Elements.TextElement;
  body: Elements.RichTextElement;
}>;

// Gets your content item
const response = await deliveryClient.item<Article>('my_article')
  .toPromise();

// Stores the contents of the rich text element
const richTextElement = response.data.item.elements.body;

// Note: The code below executes correctly in browser. To adjust the code for nodejs, see https://kontent.ai/learn/js-rte-nodejs
// Defines how to resolve the rich text element
const resolvedRichText = createRichTextHtmlResolver().resolveRichText({
  // Gives the resolver the contents of your rich text.
  element: richTextElement,
  urlResolver: (linkId, linkText, link) => {
    let url = '#unsupported-link-type';
    // Checks the content type of the linked content item
    if (link.type === 'article')
      url = `/articles/${link.urlSlug}`;
    return {
      linkHtml: `<a class="xLink" data-item-id="${linkId}" title="${linkText}" >${url}</a>`,
      // You can also return a plain URL
      linkUrl: url,
    };
  }
});

const resolvedHtml = resolvedRichText.html;