On-page Editing - Optimizely CMS 12

Exam Area: Area 1 – Product Knowledge (15%)

---

1. What is On-page Editing?

On-page editing allows editors to edit content directly in the preview without opening a separate form.

---

2. Enabling On-page Editing for a Property

@* Html.PropertyFor automatically enables OPE in Edit Mode *@
@Html.PropertyFor(m => m.CurrentPage.Heading)

@* Tag Helper *@
<epi-property name="Heading" model="@Model.CurrentPage"></epi-property>

---

3. ContentArea Drag & Drop

@* ContentArea with OPE = drag & drop blocks *@
@Html.PropertyFor(m => m.CurrentPage.MainContentArea)

In Edit Mode:

• Drag blocks from Media/Blocks panel into ContentArea
• Click block → shows block editor
• Drag to rearrange

---

4. Checking Edit Mode in Code

// Check whether we are in Edit Mode
var modeHelper = ServiceLocator.Current.GetInstance<IPageMode>();
if (modeHelper.PageEditing)
{
    // In edit mode
}

// In view
@inject IPrincipal User
@if (ViewContext.HttpContext.IsInPreviewMode())
{
    // Show extra info for editors
}

---

5. DisplayMode in Views

// DisplayMode affects how content is rendered
ContextMode.Default    // Normal website visitor view
ContextMode.Edit       // Edit mode (OPE enabled)
ContextMode.Preview    // Preview mode

---

6. Conditional Rendering

@inject IContextModeResolver ContextModeResolver

@if (ContextModeResolver.CurrentMode == ContextMode.Edit)
{
    @* Show editor hints *@
    <div class="editor-hint">This section requires an image</div>
}
else
{
    @* Normal visitor view *@
}

---

Review Questions

1. Why is @Html.PropertyFor() important for OPE? (Enables on-page editing for the property in Edit Mode)
2. How does OPE work with ContentArea? (Allows drag & drop of blocks directly in the preview)
3. ContextMode.Edit vs ContextMode.Default? (Edit: inside CMS edit view; Default: visitor view)
4. How do you render differently in edit mode? (Use IContextModeResolver.CurrentMode)