Skip to content
Strife Docs

Reference Fields

Rich Content

View as Markdown

The Rich Content field empowers editors to create dynamic and visually appealing content, which is then stored in the database as HTML.

Strife Studio screenshot of a Rich Content field

Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

Note:

You can find a comprehensive list of all basic settings in the 'Overview' section.

OptionDescription
Menu buttons
Selects which buttons appear in the slash-menu and which heading levels (H1–H6) are enabled. See Menu button values
Placeholder Document~
Specifies a node scheme that the document must follow.
Lock Placeholder Document~
Specifies whether the user should be prevented to add more nodes after what's specified under the placeholder-document.
Warning:

A tilde (~) denotes that a setting is available in developer preview only.

Pass menuButtons as an array of strings. Heading values (heading1 through heading6) control which heading levels the editor accepts. Other values enable the corresponding slash-menu items.

ValueDescription
heading1…heading6
Enable the corresponding heading level. Include only the levels you want available.
bulletList
Unordered list slash-menu entry.
orderedList
Numbered list slash-menu entry.
checkList
Task list with checkboxes.
image
Image insert slash-menu entry.
video
Video insert slash-menu entry.
table
Table insert slash-menu entry.
Note:

Inline formatting (bold, italic, underline, strikethrough, link, blockquote, details) is always available from the text-selection menu, independent of menuButtons.

Define with JSON

When defining templates using JSON, this field is represented using:

  • Component Name: str-textarea
  • Type: html
  • Reference ID: str-textarea|html

The settings above map into the editor.attributes object inside the JSON definition.

JSON
{
  ...
  "editor": {
    "name": "str-textarea",
    "type": "html",
    "propertyName": "...",
    "attributes": {
      "menuButtons": ["heading1", "heading2", "bulletList"],
      "placeholderDocument": "{\"content\":\"heading paragraph+\",\"placeholders\":{\"heading\":\"Enter title\",\"paragraph\":\"Start writing…\"}}"
    }
  },
  ...
}

Placeholder Document

Warning:

Developer preview. API may change.

placeholderDocument takes a JSON string with two optional keys:

  • content — a ProseMirror content expression that constrains which node types the document contains and in what order. Examples: "heading" (exactly one heading), "heading paragraph+" (one heading followed by one or more paragraphs), "heading paragraph*" (heading with optional paragraphs).
  • placeholders — an object mapping ProseMirror node-type names to placeholder text shown when the node is empty.

Example configuration:

JavaScript
// Rendered as a JSON string in the template attribute:
{
  "content": "heading paragraph+",
  "placeholders": {
    "heading": "Enter title",
    "paragraph": "Start writing…"
  }
}

Valid node-type names for placeholders (and content):

  • heading — all levels use the same node type; the level attribute (1–6) is set by the editor. Use heading, not heading1.
  • paragraph
  • bulletList, orderedList, listItem
  • blockquote
  • codeBlock
  • image, video

To produce the final attribute value, JSON-stringify your config object — the JSON must be embedded as a string in the placeholderDocument attribute. When building templates in code:

JavaScript
attributes: {
  placeholderDocument: JSON.stringify({
    content: "heading paragraph+",
    placeholders: {
      heading: "Enter title",
      paragraph: "Start writing…"
    }
  })
}

Live preview

The compatible Strife Web Components for a Rich Content field are container components only.

Note:

For more information on live preview and Strife Web Components, please refer to the Live preview documentation.

Search… ⌘K
Theme