Rich Text / Title Templating

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.

There are two different API Endpoints

Note that there are two different API Endpoints which are outputted in different ways.

If you are using the javascript-kit or the nodejs-sdk, then make sure you are using the the API v1 endpoint:

https://your-repo-name.prismic.io/api

If you are using the prismic-javascript and prismic-dom kits, then make sure you are using the API v2 endpoint:

https://your-repo-name.prismic.io/api/v2

The code snippets below are for the API v2 unless marked as for API v1.

Output as HTML

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

The following is an example that would display the title of a blog post.

  • ejs
  • pug
  • pug (API v1)
Copy
<%- PrismicDOM.RichText.asHtml(document.data.title, ctx.linkResolver) %>
Copy
!= PrismicDOM.RichText.asHtml(document.data.title, ctx.linkResolver)
Copy
!= document.getStructuredText('blog-post.title').asHtml(ctx.linkResolver)

In the previous example when calling the asHtml method, you need to pass in a Link Resolver function. To learn more about how to set up a Link Resolver, check out our Link Resolving page.

The following example shows how to display the rich text body content of a blog post.

  • ejs
  • pug
  • pug (API v1)
Copy
<div class="blog-body">
  <%- PrismicDOM.RichText.asHtml(document.data.body, ctx.linkResolver) %>
</div>
Copy
div.blog-body
  != PrismicDOM.RichText.asHtml(document.data.body, ctx.linkResolver)
Copy
div.blog-body
  != document.getStructuredText('blog-post.body').asHtml(ctx.linkResolver)

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.

If you are using the API v2

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. If you are using the javascript-kit and the API v1, disregard this warning.

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.

  • api-v2
  • api-v1
Copy
var PrismicDOM = require('prismic-dom');
var Elements = PrismicDOM.RichText.Elements;

var 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 for other elements
    default: 
      return null;
  }
};
Copy
var htmlSerializer = function(element, content) {

  // Add a custom class to all paragraphs
  if (element.type == "paragraph") {
    return '<p class="paragraph-class">' + content + '</p>';
  }

  // Don't wrap images in a <p> tag
  if (element.type == "image") {
    return '<img src="' + element.url + '" alt="' + element.alt + '">';
  }

  // Return null to stick with the default behavior for all other elements
  return null;
}

Then here is how you pass the HTML Serializer to your asHtml function. In this example the Rich Text field has the API ID page_text.

  • ejs
  • pug
  • pug (API v1)
Copy
<div class="page-body">
  <%- PrismicDOM.RichText.asHtml(document.data.page_text, ctx.linkResolver, htmlSerializer) %>
</div>
Copy
div.page-body
  != PrismicDOM.RichText.asHtml(document.data.page_text, ctx.linkResolver, htmlSerializer)
Copy
div.page-body
  != document.getStructuredText('page.page_text').asHtml(ctx.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.

  • ejs
  • pug
  • pug (API v1)
Copy
<h3 class="author">
  <%= PrismicDOM.RichText.asText(document.data.author) %>
</h3>
Copy
h3.author !{ PrismicDOM.RichText.asText(document.data.author) }
Copy
h3.author !{ document.getStructuredText('page.author').asText() }