Fill in the Blanks with Content Editable

June 16, 2009

When using templates as a starting point for authoring, sometimes it’s useful to mark sections off as uneditable so the author can’t change or delete them. EditLive! supports this through the contenteditable attribute. Using this attribute you can provide a fill in the blanks or form-like authoring environment entirely within EditLive! For example with the HTML:

<p contenteditable=”false”>Description:</p>
<p>Enter the description here.</p>

The first paragraph will be uneditable by authors, but the second paragraph will remain editable so authors can fill it in. You can also nest elements with contenteditable to further control what can be changed:

<table contenteditable=”false”>
  <tr>
    <th>Uneditable Heading 1</th>
    <th>Uneditable Heading 2</th>
  </tr>
  <tr contenteditable=”true”>
    <td>Editable cell 1</td>
    <td>Editable cell 2</td>
  </tr>
</table>

In this table, the headings will be uneditable, but the cells in the second row will be editable by authors.