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>
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).