Last updated: Oct 30 2018
On-page editing with client-side rendering
Note: Beta features must be enabled in order to take full advantage of these features.
Editing HTML attributes
CMS UI includes three HTML attributes that can be added to editable DOM elements:
This attribute marks an element for editing
This attribute prevents the DOM from being modified directly when editing
This attribute creates a dialog for editing, and should be used for string types
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. Then the resources need to be required in a razor view with other scripts for the site using @Html.RequiredClientResources("Footer").
Handling context modes
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:
True in both edit mode and preview mode
True in edit mode and false in preview mode
True if the beta object is available. Otherwise, subscribe to beta/epiReady to get the beta object as soon as it is available
Content delivery API
Episerver has released a content delivery API to make a headless implementation even easier. Check out the documentation.
SPA template site (New in CMS UI 11.11.0)
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.
- Introducing a new SPA template site: MusicFestival
- Represent the concept of "pages" and "blocks" with matching client side components in a SPA
- Taking control of client-side rendering in OPE
- Taking more control of client-side rendering in OPE
- "domUpdated" is no longer needed
- Designing frontends for OPE without wrapping elements