The editor focus attribute makes sure that when you click on a bit of content in an email, you're taken straight to that field in the editor.
Using the editor focus attribute can really speed up the process of editing emails.
It's especially helpful when you have lots of modules in your email as there is no chance of anyone being unclear on which module controls which bit of content. Simply click on the content that needs editing and make the changes straight away.
Music: https://www.bensound.com/royalty-free-music
So the editor focus attribute can make sure the module opens at the correct editable. The div below would take you to the first field within that editable if you clicked on that text.
<div editor-focus="editables.editable_name">Headline</div>
You can also target specific fields with editor-focus whether they are inside an editable or not:
<!-- editor focus for a field --> <field type="text" name="headline"></field> <div editor-focus="headline">Headline</div> <!-- editor focus for a field within an editable --> <editable name="headline"> <field type="text" name="text"></field> </editable> <div editor-focus="editables.headline.text">Headline</div>
In the first example the value of editor focus is the name of the field, so when you click on that bit of text you'll be taken to that field in the editor.
In the second example, the value of editor-focus is editables, the name of the editable and the name of the field within that editable. So if you click on that bit of text you'll be taken to that field regardless of whether or not it is the first field in the editable.
Editor focus can also be used to link different bits of content to the same editable, which can come in very handy when you want to combine different layouts in one module.
In this example, one module contains all the options you need for both an image left/text right layout, and an image right/text left layout.
Start off with a three column module, with text in the left hand column, an image in the middle column and text again in the right hand column.
The editor focus attribute will enable you to type in the content you need once and it will apply to both of the text columns. It also means you can have one editable apply to both pieces of text and when you click it, you'll be taken to the relevant field in the editor. You can then use rules and checkbox/dropdown fields to remove the left or right column depending on whether you want an image left layout or image right layout. In this example we'll be using a dropdown field.
In the first column, put the text you want to apply to both columns inside an editable:
<td> <editable name="headline" label="Headline" rich> Headline </editable> </td>
Then with the same bit of text in the right hand column you can use the editor focus attribute:
<td> <div replace="{{editables.headline.content}}" editor-focus="editables.headline"></div> </td>
The original editable from the first column is being referenced in the replace attribute, so whatever you write there will also apply to the text in the right hand column. Even though there is only one editable in the first column, the editor-focus attribute will take you to this editable in the editor when the text in the <div> tag is clicked on.
So far you will have a three column module with text either side of an image. You are then able to use rules on the two text columns to either include or remove them depending on the value that is set for a certain field in the editor.
In this example we're going to include a dropdown field at the top of the module. This will have the options of left or right depending on where you want the image to appear:
<module name="img_text" label="image and text"> <field type="dropdown" name="left_right" label="image left or right" default="right"> <choice value="left"></choice> <choice value="right"></choice> </field>
Once you have this field you will need to use it to remove or include the two text columns depending on whether you want the image on the left and the text on the right or vice versa.
On each of the <td> tags containing the two text columns you can use rules to control which bit of text will show in the Taxi preview.
On the left hand column you can have a rule to remove that entire <td> if the 'left' option is chosen from the dropdown:
<td rule="{% if left_right =='left'%}{%remove%}{%endif%}"></td>
On the right hand column you can have a rule to remove that entire <td> if the 'right' option is chosen from the dropdown:
<td rule="{%if left_right =='right'%}{%remove%}{%endif%}"></td>
So if left is selected from the dropdown it will create an image left, text right layout, and if right is selected then it will create a text left, image right layout.
The default layout of the module can be set by using the default attribute on the dropdown field.
You can also use this technique with a checkbox field. This will create a toggle in the editor to control the layout of the module.
<module name="img_text" label="image and text">
<table width="600px" align="center">
<field type="dropdown" name="left_right" label="image left or right">
<choice value="left"></choice>
<choice value="right"></choice></field>
<field type="number" label="body font size" name="font_size_body" default="16"></field>
<field type="number" label="headline font size" name="font_size_headline" default="28"></field>
<table align="center">
<tr>
<td rule="{% if left_right =='left'%}{%remove%}{%endif%}" width="300px" valign="top">
<table>
<tr>
<td replace-style="padding:10px;font-size:{{font_size_headline}}px;">
<editable name="headline" label="Headline" rich="">Headline </editable>
</td>
</tr>
<tr>
<td replace-style="padding:10px;font-size:{{font_size_body}}px;">
<editable name="text" label="Body Copy" rich="">Text</editable>
</td>
</tr>
</table>
</td>
<td width="300px">
<img src="IMAGE URL GOES HERE">
</td>
<td rule="{%if left_right =='right'%}{%remove%}{%endif%}" width="300px" valign="top">
<table>
<tr>
<td replace-style="padding:10px;font-size:{{font_size_headline}}px;">
<div replace="{{editables.headline.content}}" editor-focus="editables.headline">
</div>
</td>
</tr>
<tr>
<td replace-style="padding:10px;font-size:{{font_size_body}}px;">
<div replace="{{editables.text.content}}" editor-focus="editables.text">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
</module>