Scrivito.InPlaceEditingOff

A container component for selectively disabling Scrivito’s in-place editing.

Copy
<Scrivito.InPlaceEditingOff>
  No editing here
</Scrivito.InPlaceEditingOff>

If Scrivito’s in-place editing doesn’t seem to be suited for a specific piece of content, the Scrivito.InPlaceEditingOff container component allows you to switch it off, be it for widgets, whole pages, or even a single React component.

For an area with in-place editing switched off, text and HTML editing is disabled, and references (e.g. the image of an image widget) cannot be altered by clicking and exchanging them using the Content Browser. Also, drag-and-drop is not available inside widget lists, and navigation list as well as widget menus are absent.

Remarks

  • On the live site and in preview mode, Scrivito.InPlaceEditingOff has no effect.
  • To reenable editing in a child component, use Scrivito.RestoreInPlaceEditing.

Examples

Show the job title in the jobs list, but make it non-editable:

JobOverviewWidgetComponent.js
Copy
<Scrivito.InPlaceEditingOff>
  <Scrivito.ContentTag tag="h3"
      content={job} attribute="title" />
</Scrivito.InPlaceEditingOff>

Make the footer widget list editable on the homepage only:

Footer.js
Copy
const root = Scrivito.Obj.root();
const isRoot = Scrivito.currentPage() && Scrivito.currentPage().id() === root.id();

return isRoot ? (
  <Scrivito.ContentTag content={root} attribute="footer" />
) : (
  <Scrivito.InPlaceEditingOff>
    <Scrivito.ContentTag content={root} attribute="footer" />
  </Scrivito.InPlaceEditingOff>
);