• Document Up to Date

In-Context Editing

In-context editing (ICE) allows authors to edit/update content in place through editable regions. This makes it easier for the content authors to find and edit their content.

Crafter Studio supports enabling in-context editing for content authors through macros/tag attributes for freemarker templates and HTML5 attributes for HTML5 applications.

Enabling In-Context Editing in Freemarker Templates

Here’s a summary of macros and corresponding tag attributes used for enabling in-context editing in freemarker templates

In-context Editing Pencils

The macro <@studio.iceAttr/> adds a pencil to open a form for the path

<@studio.iceAttr/> Tag Attributes

Attribute Name

Required

Expected Value

iceGroup

No (unless path is not supplied)

the label/id assigned to iceGroup on
fields in your content model.
path





No
(unless iceGroup is not supplied)




the path of the item. This is typically
just mode.storeUrl.

If path is not supplied the system
will assume the outermost object e.g.
the page as the path.
label

No (but it’s a best practice)

UI will use label if it exists. Otherwise
the iceGroup or path will be used.
component
Yes
a SiteItem object

Drag and Drop Zones

The macro <@studio.componentContainerAttr/> defines a drop zone for components

<@studio.componentContainerAttr/> Tag Attributes

Attribute Name

Required

Expected Value

target



Yes



The name of the field in the parent model
where component references will be stored.

This is typically an item selector field type.
component
Yes
a SiteItem object

Rendering components from the target inside the container

The macro <@renderComponent/> renders components

<@renderComponent/> Tag Attributes

Attribute Name

Required

Expected Value

parent


No


a SiteItem object
Required if the component to be rendered is
not the current item
component
Yes
a SiteItem object

Identifying components in the template

The macro <@studio.componentAttr/> identifies a component

<@studio.componentAttr/> Tag Attributes

Attribute Name

Required

Expected Value

path

No

the path to the component. Typically this is
simply contentModel.storeUrl
ice







No







true or false. If true the component will
automatically render ICE (in context editing)
controls for you. This is helpful on simple
components. Larger components may be so complex
that multiple ice elements make sense. In the
latter case omit this attribute or set it to
false and manually add your own ICE attributes
to the component template
iceGroup

No (unless path is not
supplied)
the label/id assigned to iceGroup on
fields in your content model.
component
Yes
a SiteItem object

Take a look at Freemarker Template In-Context Editing for more details and examples on how to use the tag attributes for enabling in-context editing in Freemarker templates.

Enabling In-Context Editing in HTML5 Applications

In-context Editing Pencils

The following attributes adds a pencil to open a form for the path (and ICE id combination if set):

Attribute Name

Required

Expected Value

data-studio-ice



Marks the element as the container for
in-context editing. No value is required.
data-studio-ice-path



Path of the content object.
Example: “/site/products/a-component.xml”
data-studio-ice-label

No (but it’s a best
practice)
UI will use label if it exists. Otherwise
the path will be used.
data-studio-embedded-item-id


No (only required
when component is
of embedded type
Object Id of embedded component



Identifying Drag n Drop Components

The following attributes identifies the outer div of a component:

Attribute Name

Required

Expected Value

data-studio-component



Content type name.
Example: “/component/product”
data-studio-component-path



Path of the content object.
Example: “/site/products/a-component.xml”
data-studio-embedded-item-id


No (only required
when component is
of embedded type
Object Id of embedded component



Identifying Drag n Drop Components with a Pencil

The following attributes identifies the outer div of a component and adds a pencil to open a form for the path (and ICE id combination if set)

Attribute Name

Required

Expected Value

data-studio-ice



Marks the element as the container for
in-context editing. No value is required.
data-studio-ice-path



Path of the content object.
Example: “/site/products/a-component.xml”
data-studio-ice-label

No (but it’s a best
practice)
UI will use label if it exists. Otherwise
the path will be used.
data-studio-component



Content type name.
Example: “/component/product”
data-studio-component-path



Path of the content object.
Example: “/site/products/a-component.xml”
data-studio-embedded-item-id


No (only required
when component is
of embedded type
Object Id of embedded component



Drop Zones

The following attributes identifies an element as a drop zone.

Attribute Name

Required

Expected Value

data-studio-components-target




Yes




The name of the field in the parent model
where component references will be stored

This is typically an
item selector field type.
data-studio-components-objectid

a SiteItem object
data-studio-zone-content-type



Content type id/path of the component.
Example: “/component/product”

Some Notes on HTML5 Applications In-Context Editing Attributes

  • You can (and typically do) combine drag and drop component attributes and pencils attributes in the same tag, as described here

  • You cannot combine drop zone attributes with ICE or drag n drop component attributes. They must be in their own tag.