<object type="application/kenticocloud" data-type="item" data-codename="my_tweet"></object>
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 ReactresolveRichText()
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.
// 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;