Rich Content

Settings

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

Menu button values

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.

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, except Custom class names, which maps to editor.options.calloutVariants (see Callout types).

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

Callout types

A field's callout types go in editor.options, not editor.attributes. calloutVariants lists one entry per type: name is the label editors pick, and value is the CSS class the callout gets. The Custom class names setting writes the same list with the class under class instead of value; both spellings work.

{
  ...
  "editor": {
    "name": "str-textarea",
    "type": "html",
    "propertyName": "...",
    "options": {
      "calloutVariants": [
        { "name": "Highlighted", "value": "highlighted" }
      ]
    }
  },
  ...
}

Your site styles each class. The new interface also offers four built-in types and accepts only some class names; see fields.html().

Placeholder Document

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:

// 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:

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.