(DEPRECATED) Marking up text and images in EasyEditor

Text and images can be marked up in your document as editable. That is to say, any user using your template will be able to edit such text or change/modify an image.

Any items on the page not marked as such will not be modifiable within EasyEditor.

Marking up text

To make text editable, make sure it's in a table cell and apply the class "ee_editable" like so:

<td class="ee_editable">
This text is editable
</td>

Marking up images

Images automatically become scalable when marked up, and if the image is dragged around (see dropzones), it will be scaled to fit in its new location:

<img src="image.jpg" class="ee_editable">

The rules

There are a few rules to obey with the ee_editable tag:

  • No other EasyEditor tag must go inside an element that has the ee_editable class.
  • The tag must be used on a block level element that can contain other block level elements. Principally, for emails, this means the td tag.
  • Anything inside an editable element is editable. So, where possible, don't make complex HTML editable.

Keeping it simple

On the final point of the rules above, try to keep as little editable as possible. Take the following. It defines two text columns. Both work, but usually the second example would be more sensible:

<td class="ee_editable>
<table>
<tr>
<td>
[Edit Column 1]
</td>
<td>
[Edit Column 2]
</td>
</tr>
</table>
</td> 
 
<td>
<table>
<tr>
<td class="ee_editable">
[Edit Column 1]
</td>
<td class="ee_editable">
[Edit Column 2]
</td>
</tr>
</table>
</td> 

In the first, the entire inner table is edtable (and therefore can be deleted or altered). In the latter example, only the text within the two columns is editable.

Have more questions? Submit a request

Comments

Powered by Zendesk