In the first lesson we showed you how to make text editable by wrapping it inside an <editable> tag. Another way to make text editable is by using fields.
Here, you start off with a <field> tag. You give it a name and a label just like the other tags but also a type. This controls what the field is and what it does in the editor. We'll give it a type="text" for a text field. For a full list of all the types of fields check out our fields page.
<field type="text" name="headline_text" label="Headline Text"></field>
Fields can go anywhere in the HTML. You may prefer to have all the fields for one module all at the top of the module, before any of the HTML. Or you might prefer to have fields throughout the module near where the actual content is. This is completely up to you and how you want to structure your code.
Once you have added the field, you'll need to wrap <content> tags around the text you want to control. Content tags enable you to use your field to control whatever text is inside them. And when you export out of Taxi content tags are removed so you're just left with your text and HTML.
Then, in the opening tag, use a replace attribute. The value of this needs to be the name of the text field inside these brackets: {{ }}. In this case the field name is headline_text.
<content replace="{{headline_text}}">Headline</content>
Here it is all together
<editable name="headline" label="Headline">
<field type="text" name="headline_text" label="Headline Text"></field>
<content replace="{{headline}}">Headline</content>
</editable>
Just like when we only used an editable tag, we can also make this field a rich text field.
To do this, you'll need to change the type in the field tag to rich.
<field type="rich" name="headline_text" label="Headline Text"></field>
This will now give you the option to add styling to the text. The default styling options in rich text fields are bold, italic, underline and adding links.
But what if your brand doesn't allow for italicised text, or if there are certain modules where you don't want users to be making text bold? You don't have to make all these options available if that isn't what you need for your emails.
We can use expectations to achieve this. If we only want the option to add bold text and no other styling we'd add the following to our field tag.
<field type="rich" name="headline_text" label="Headline Text" expect="allow-styles:bold"></field>
We use the expect attribute, and the value of this is allow-styles:bold, meaning bold will be the only styling option in this field. If you wanted to have bold and italics as the only option you'd use expect="allow-styles:bold italic".
You can follow this approach of adding fields and content tags to any of the text you want editable in your Email Design System.
You can also add in other custom styles for rich text fields, such as subscript, superscript or custom colours and fonts. Read more about rich text fields and other approaches to text formatting.
Now let's upload our EDS into Taxi and see how these new text fields behave. If you don't have access to Taxi, here's a video showing how these fields will work.
Next, we're going to look at image fields and how we can use them to have more control over how our images are edited.