By default, the rich text field allows an editor to add three types of formatting:

  • Bold
  • Italic
  • Linked text


The template designer can add extra styles (e.g. text with brand colours) and refine the default styles (e.g. change the text colour for links).

Getting Started

To make an editable rich the word ‘rich’ must be added to the editable tag:

<editable name="editablename" rich></editable>

Use type="rich" to use a the rich editor as a field:

<field name="fieldname" type="rich"></field>

Customised Styles

There are 2 notations for customised styles:

  • single-tag
  • multi-tag

A single tag style consists of a single tag with fixed attributes. So if you can express the custom style with a single span tag with a fixed style attribute, you can use a single tag style. To redefine a link you need to use multiple tags (as a field tag is needed to set the href) so the multi-tag notation must be used.

Rich style definitions can appear anywhere in the template.  

Single-Tag Notation

<span name="cool" label="Cool text" style="color: red;" rich-style-example>
Example text
</span>

Adding ‘rich-style-example’ to the end of this span tag marks it out as defining a rich style. The name and label attributes are used to give the style a name and optionally a label. Other attributes are optional and will be used when the style is applied to the text. The style="" attribute is not mandatory – use whichever attributes are needed for your style. Also note that any HTML tag can be used, not just <span>.

If the name matches one of the default styles (bold,italic) then the default style will be redefined to your new definition, otherwise the style will appear as a custom style on the custom styles list.

Multi-Tag Notation

<rich-editable-style name="link">
  <a replace-href="{{href}}" replace-style="color:{{acolor}}" replace="{{ rich.selection_text }}"></a>
  <field name="href" type="href"></field>
  <field name="acolor" type="color" default="#111111"></field>
</rich-editable-style>

A <rich-editable-style> block is used to define a multi-tag style. In this case a link is used with fields for colour and href. Normal taxi replace-attribute notation is used. {{rich.selection_text}} is used to refer to the selected text from the rich editor.

Styles defined as a rich editable style are made available to all rich text fields in a template.

Controlling rich editable styles

You may wish to control which rich editable styles are available on a given rich text field. You can do this by adding the allow-styles attribute to a given rich text field. Permitted values are bold, italic, link and any custom style names you may have. Values are separated with a space.

In this example, the rich text field will allow bold and italic formatting, but no custom styles or ability to add a link:

<field name="fieldname" type="rich" allow-styles="bold italic"></field>

<style-example-only>

The <style-example-only> tag can be used where styles are defined but not used in default content. Everything inside a <style-example-only> tag is removed before rendering.

link-style attribute

In addition, you can specify which style information should be added to any inline links in a rich text field by adding the link-style= attribute to a rich text field, for example:

<editable name="bodycopy" link-style="color:#ffffff;" rich>
body copy text
</editable>

In this example, any links added in this rich text field will have a style attribute added setting the colour to white. (Note that currently, liquid references can't be added to the link-style attribute).