Inline editing


Inline editing enables you to edit content directly in the front end of the website. Inline editing is turned on by default.

Enable inline editing for label, and html.

To edit label text and HTML block within a page, make sure that Enable inline editing is checked in the system settings.

Inline_edit_enable

The inline editing tool depends on some JavaScript. If it is not working, check to make sure that you have registered the JavaScript into page by including the below in the layout header:
@Html.FrontHtml().RegisterScripts()


Once you have checked this, hover your mouse over the static html block or label and you should see an edit icon next to your mouse.



Enable inline editing for dynamic content.


For dynamic content like article list or detail page. You need to manually define which fields that block of content it is. This is can be done by inserting an additional html attribute to the tag that contains the content item field or content item.

If you are using datarule, the code with inline editing enable is auto generated. See below screen.

Inline_edit_content_field

If you are writing the view implementation yourself, you can find the inline edit field in the code helper.

The code helper provides two methods:

To edit on one single field, use: @ViewHelper.Edit(item,"fieldName")

To edit on a list of items, use: @ViewHelper.Edit(item)

Pleaser refer to the code example generated by data rule.

After you have added those attributes in the HTML tag, in the front end site content display page, you can hover your mouse over the item list and see the editing toolbar to edit, copy and delete content items. 
inline_edit_dynamic.png