Note: Beta features must be enabled in order to take full advantage of these features.
CMS UI includes three HTML attributes that can be added to editable DOM elements:
From CMS UI 11.16.0, it is enough with one HTML attribute:
Editable blocks rendered in a content area should have this HTML attribute on each block element:
To know when to re-render, subscribe to the topic beta/contentSaved. The controller must contain the attribute [RequireClientResources] unless it inherits from either PageController or ContentController, as these both include the attribute by default. The resources then need to be required in a razor view with other scripts for the site using @Html.RequiredClientResources("Footer").
In order to properly apply edit overlays and enable/disable client-side routing as needed, the client requires some sort of indicator of the current context mode. Episerver provides an epi.beta object for this purpose with the following properties:
Episerver has released a content delivery API to make a headless implementation even easier. Check out the documentation.
To demonstrate some useful concepts when creating a Single Page Application with working on-page editing, see the MusicFestical SPA template site on Github. For descriptions of the template site, see the blog post Introducing a new SPA template site: MusicFestival.
Last updated: Jan 29, 2019