Inline Editing on a Page

Text Field Inline Editing

1. Editing a text field. To enable inline editing, you need to add data attributes in the HTML inside the container or SPA to to that field of the contentlet editable. For example, to make the title field editable, you would use the following, which specifies `data-mode="minimal", meaning, no wysiwyg.

<h1 
    #if ($EDIT_MODE) 
        data-language="${CONTENT_LANGUAGE}"
        data-mode="minimal"
        data-inode="${ContentInode}"
        data-field-name="title"      
    #end
>
    $!{title}
</<h1>

WYSIWYG Inline Editing

To display wysiwyg controls inline, you wrap your field value in a data attribute element and specify data-mode="full", e.g.

<div
    #if ($EDIT_MODE) 
        data-language="${CONTENT_LANGUAGE}"
        data-mode="full"
        data-inode="${ContentInode}"
        data-field-name="body"      
    #end
>
    $!{body}
</div>

In both cases, content will save as soon as the user leaves the field.