<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 React and Vue applications.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.
// 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;