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 Rich text field is capable of outputting the content directly into HTML, including the formatting options that you choose for it.

It is possible to add links inside a Rich Text field. You can link to documents or media items in your repository as well as links to external websites.

You can also configure the Rich Text field to allow a content writer to insert images or embeds directly in with the text.

This field is different from the Key Text field which only outputs a single string.

 

Configuration

Assign the Rich Text field a Field name, API ID, and Field placeholder text that will display in the entry editor.  

Next you can select whether the Rich Text field will allow multiple paragraphs or restrict the content writers to just one paragraph or title.

Then you can toggle on & off the various options available for the Rich Text editor. These include paragraph, pre, headers, bold, italics, links, images, embed, list, and right-to-left text.

The final option is if you want to allow content authors to select the "Open in a new tab" option for their links.

 

JSON Editor

 The following defines a multi-line Rich Text field (e.g. a blog post rich text):

"body": {
  "type": "StructuredText",
  "config": {
    "multi": "paragraph, heading1, heading2, strong, em, hyperlink",
    "allowTargetBlank" : true,
    "label": "Body",
    "placeholder": "Enter your text here..."
  }
}

 
The following defines a single paragraph Rich Text field:

"quote": {
  "type": "StructuredText",
  "config": {
    "single": "paragraph, strong, em",
    "label": "Quote",
    "placeholder": "Enter a quote..."
  }
}

 
If neither multi or single are specified in the config, then the field will allow multiple lines with all available formatting options.

 

Use labels to add style options in your Rich Text

For special formatting in your Rich Text content, you can add labels. Labels will wrap the selected content in a span element with the class of the given name. You can then add whatever CSS you need for that class.

This is an advanced configuration that can currently only be set up in the JSON editor.

Here is an example of a Rich Text field that provides the label options “right-align” and "center-align":

"page-body": {
  "type": "StructuredText",
  "config": {
    "label": "Page Body",
    "placeholder": "Enter your text...",
    "labels": ["right-align", "center-align"]
  }
}

 
Here is an example of a Rich Text field where the images have a width and height constraint:

"page-text": {
  "type": "StructuredText",
  "config": {
    "label": "Page Text",
    "placeholder": "Enter your text and images...",
    "imageConstraint" : {
      "width" : 500,
      "height" : 300
    }
  }
}

 

JSON Reference 

"type": (string, required) Value must equal "StructuredText"

"config": (object, optional) Options listed below

 

config

"placeholder": (string) Sets a user-friendly placeholder into the field

"label": (string) Sets the label that shows up for the field in the entry editor

"multi": (string) Coma-separated formatting options. If used, the field will allow multiple lines with listed formatting option

"single": (string) Coma-separated formatting options. If used, the field will allow single line with listed formatting option

"labels": (array) An array of strings that will surround the selected content in a span tag with the defined class

"imageConstraint": (object) Set the width and/or height constraints of any image added to the field. The "width" and "height" are set using integers that represent the size in pixels

"useAsTitle": (boolean) If set to true, will use this field for the document name on the document listing page

 

formatting options (for single or multi config)

heading1-6: Heading 1 to heading 6

paragraph: Normal text paragraph

strong: Strong/Bold

em: Emphasized

preformatted: Preformatted text

hyperlink: Inline links to the web, to repository content, or to a media library item

image: Inline image

embed: Inline link to a service URL supporting oEmbed

list-item: Unordered list

o-list-item: Ordered list

rtl: Right-to-left text

Did this answer your question?