Richer Text

Customization

Options

Optionally, you can customize a few of the attributes by passing them as attributes to the <richer-text-editor> tag.

Option     Default Allowed values Notes
serializer   “html” “html”, “json”  
input   ”” Form field id  
content   ”” String  
placeholder     “Start typing…” String  
callouts   “false” “true”, “false”  
tables   “false” “true”, “false”  
emoji   “true” “true”, “false”  
mentionable-users-path   ”” URL path to .json endpoint  
embeds-path   “/embeds” URL path to controller endpoint  
oembed   “false” “true”, “false” When present, embeds-path must be provided

JSON Serializer

Richer Text allows you to take full control of storing, and rendering content by using JSON to serialize the content instead of the default (HTML) serializer.

JSON output:

<richer-text-editor
  serializer="json"
  content='{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Hello from the "},{"type":"text","marks":[{"type":"bold"}],"text":"JSON"},{"type":"text","text":" serializer."}]}]}'
>
</richer-text-editor>

Configuring the Toolbar

Richer Text supports customizing the toolbar as well

For example:

<richer-text-editor
  toolbar-preset="default"
  toolbar-placement="top"
></richer-text-editor>

<richer-text-editor
  toolbar-preset="minimal"
  toolbar-placement="bottom"
></richer-text-editor>

Customizing options completely

Optionally you can specify the toolbar using the toolbar attribute:

<richer-text-editor
  toolbar="heading-1, heading-2, divider, bold, italic, strike"
  toolbar-placement="top"
></richer-text-editor>

The supported options are:

"bold",
  "italic",
  "strike",
  "code",
  "divider",
  "heading-1",
  "heading-2",
  "heading-3",
  "bulletlist",
  "orderedlist",
  "blockquote",
  "code-block",
  "horizontal-rule",
  "divider",
  "attachment",
  "spacer",
  "undo",
  "redo",
  "embed";