On-Site Editing

With the on-site editor, users can edit pages while directly seeing their changes on the corresponding website. For the best on-site experience, the developer has to keep a few things in mind, while developing components.

TagHelpers for On-Site Editing

The following TagHelpers can be used to improve UX while using the on-site editor.

To be able to use the TagHelpers, you have to add the following TagHelpers to your _ViewImports.cshtml file:

@addTagHelper *, Confinity.Pages

Hiding Content in On-Site Editor

You can hide content in the on-site editor with the following TagHelper.

<confinity-onsite-editing-hide>
    <p>This is not visible in on-site editing.</p>
</confinity-onsite-editing-hide>

Show Content Only in On-Site Editor

It's also possible to do the other way around and show certain content only in the on-site editor as follows.

<confinity-onsite-editing-show>
    <p>This is only visible in on-site editing.</p>
</confinity-onsite-editing-show>

Make Lists of Components Editable

If your component contains a list of other components, you may want to be able to add new components to that list. You can achieve that like in the following example.

@foreach (var tab in tabs)
{
    <div role="tabpanel">
        @await Component.InvokeConfinityViewComponentsAsync(tab.Tab.Components)
        <confinity-onsite-editing-property id="@tab.Tab.Id" property-name="@nameof(TabModel.Components)" />
    </div>
}