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