Templating the Rich Text & Title fields

The Rich Text field (formerly called Structured Text) is a configurable text field with formatting options. This field provides content writers with a WYSIWYG editor where they can define the text as a header or paragraph, make it bold, add links, etc. The Title field is a specific Rich Text field used for titles.


Before Reading

This article assumes the following:

1. That you have saved the document object in a variable named document as shown in the Retrieve the document object page.

2. That you have already included and installed the prismic-dom library.

3. That you have set up a Link Resolver stored it in a variable named linkResolver.

Output as HTML

The basic usage of the Rich Text / Title field is to use the PrismicDOM.RichText.asHtml() method to transform the field into HTML code.

The following is an example that would access the Rich Text field named post_content and convert the field into HTML.

Copy
const PrismicDOM = require('prismic-dom');

const contentHtml = PrismicDOM.RichText.asHtml(document.post_content, linkResolver);

In the previous example when calling the asHtml method, you need to pass in a Link Resolver function. This function will convert any Links to a document in your Prismic repository into the proper url for your website. To learn more about how to set up a Link Resolver, check out our Link Resolving with Javascript page.

Customizing the HTML output

You can customize the HTML output by passing an HTML serializer to the method. You can learn more about this on the HTML Serializer page.

In order for the following HTML Serializer example to work, you must make sure that your project is using the prismic-dom version 2.1.0 or higher. This will not work for older versions of the kit.

Here is an example of an HTML serializer function that doesn't wrap images in a paragraph element and adds a custom class to all other paragraph elements.

In this example the Rich Text field has the API ID page_text.

Copy
const PrismicDOM = require('prismic-dom');
const Elements = PrismicDOM.RichText.Elements;

const htmlSerializer = function (type, element, content, children) {
  switch(type) {

    // Add a class to paragraph elements
    case Elements.paragraph: 
      return '<p class="paragraph-class">' + children.join('') + '</p>';

    // Don't wrap images in a <p> tag
    case Elements.image: 
      return '<img src="' + element.url + '" alt="' + element.alt + '">';

    // Return null to stick with the default behavior
    default: 
      return null;
  }
};

const html = PrismicDOM.RichText.asHtml(document.page_text, linkResolver, htmlSerializer);

For more examples of HTML Serializers, check out the HTML Serializer page.

Output as plain text

The asText method will convert and output the text in the Rich Text / Title field as a string.

Here the Rich Text field has the API ID author.

Copy
const PrismicDOM = require('prismic-dom');

const authorText = PrismicDOM.RichText.asText(document.author);