The Taxi rich text editor allows text to be styled and links to be added without the user having to insert any HTML tags.
You can give any text area in your Email Design System rich text functionality. Using Rich Text you can provide your team with styling options such as bold, italics, underline, colours, fonts, text size etc. You can also restrict it so no styling can be added.
Make sure the controls are perfectly suited to your teams so they have all the options they need without having the opportunity to add in styling they shouldn't.
Music: https://www.bensound.com/royalty-free-music
By default, the rich text field allows an editor to add three types of formatting:
The Design System developer can add extra styles (e.g. text with brand colours) and refine the default styles (e.g. change the text colour for links).
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>
There are 2 notations for customised styles:
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 Design System.
<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.
<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 an Email Design System.
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>
If you want to have no styling options on a rich text field you can use allow-styles="none".
<field name="fieldname" type="rich" allow-styles="none"></field>
You can pass custom parameters to rich text fields that control which styling options appear based on the field's context. This enables context-aware styling where the same rich-editable-style can show different options depending on where the rich text field is placed.
Define static parameters directly as attributes on the rich text field. These are accessible in choice rules via field.params.*:
<field type="rich" name="body" label="Body Text" show_red="true" allow-styles="textColor"></field>
In your rich-editable-style, you can then use the parameter in a choice rule:
<rich-editable-style name="textColor" label="Text Color">
<span replace-style="color:{{color}}" replace="{{rich.selection_text}}"></span>
<field type="dropdown" name="color" label="Color">
<choice value="#000000" label="Black"></choice>
<choice value="#FF0000" label="Red" rule="{% unless field.params.show_red %}{% remove %}{% endunless %}"></choice>
</field>
</rich-editable-style>
The "Red" option will only appear for rich text fields that have show_red="true" set.
Use the replace-* convention for dynamic parameters that reference other field values. The replace- prefix indicates the value should be evaluated as a Liquid expression:
<editable name="settings" label="Settings">
<field type="dropdown" names="body_background" label="Background Color">
<choice body_background="#FFFFFF" label="White"></choice>
<choice body_background="#013D5B" label="Atlantic (Dark Blue)"></choice>
</field>
</editable>
<editable name="content" label="Content">
<field type="rich" name="body" label="Body Text"
replace-background="{{editables.settings.body_background}}"
allow-styles="textColor"></field>
</editable>
The replace-background attribute evaluates the Liquid expression and makes the result available as field.params.background in choice rules:
<rich-editable-style name="textColor" label="Text Color">
<span replace-style="color:{{color}}" replace="{{rich.selection_text}}"></span>
<field type="dropdown" name="color" label="Color">
<!-- Dark colors for light backgrounds -->
<choice value="#000000" label="Black"
rule="{% unless field.params.background == '#FFFFFF' %}{% remove %}{% endunless %}"></choice>
<!-- Light colors for dark backgrounds -->
<choice value="#FFFFFF" label="White"
rule="{% unless field.params.background == '#013D5B' %}{% remove %}{% endunless %}"></choice>
</field>
</rich-editable-style>
When the background color dropdown changes, the rich text field's font color options automatically update to show only colors appropriate for the selected background.
Note: This feature requires Dynamic Dropdown Choice Rules to be enabled at the organization level. Contact support to activate this capability for your account.
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.
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).