Setting up Visual Editing
This article explains how to set up visual editing for content editors to see their changes in real-time with a side-by-side view directly in Prepr CMS.
Set up Visual Editing for web pages
To set up Visual Editing in your Prepr environment, you need to make sure that
- Inline frames (iframes) are allowed for the Prepr environment URLs.
- Visual editing option is enabled for each relevant model
Allow iframes for Prepr environments
Visual editing uses iframes for this in-app preview alongside a specific content item. This means your HTTP server needs to allow iframes for the Prepr domain.
If you get a server error like: Refused to frame 'https://...' because an ancestor violates the following Content Security Policy directive...,
you can allow iframes by updating the Content-Security-Policy HTTP header in the web server configuration like in the code snippet below:
Content-Security-Policy: frame-ancestors <YOUR-PREPR-ENV-URLS>Replace <YOUR-PREPR-ENV-URLS> with your own Prepr environment URLs, for example: https://prod-acme-lease.prepr.io https://dev-acme-lease.prepr.io where each URL is separated by a space.
If content editors are using Brave, they need to toggle the Shields are UP button (opens in a new tab) while using Visual editing in Prepr.
Enable Visual Editing on each model
To allow content editors to use Visual Editing while editing content items, you first need to make sure you have the correct preview URLs set up. You can set up preview URLs for multiple environments like production, acceptance, test, and development. Preview URLs are defined for a specific model.
To add one or more preview URLs, follow the steps below.
- Go to the Schema tab and choose the model you want to update.
- Click the Settings button at the top of the model and click the Preview tab.
- Enter a name and the preview URL construct for this model. You can use
{id}and{slug}variables for your construct. Example:https://example.com/{slug}.
If you loaded demo data in your environment then you'll notice a preview URL on the Article and Page models. This URL renders the content item in the Prepr Example site.
- Once your preview URLs are set up, you need to enable Visual Editing for the corresponding model by clicking the Use in Visual Editing checkbox for the applicable preview URL.
Visual Editing works best for non-production preview URLs. These staging web apps normally use the GraphQL Preview access token to display content items with unpublished changes.
And that's it. Whenever a content editor edits a content item for a model with visual editing enabled, they can see their changes real-time with the side-by-side view.
Troubleshooting
Answers to some common questions about Visual Editing.
Why do I see the "Visual Editing not available yet" screen instead of the live preview?
- This means the Visual Editing has not been enabled on the related model for this content item. To enable Visual Editing for this model, follow the steps above.
Why can't I see my content item changes in the live preview?
- This could mean the preview URL points to a production web app. If you enable Visual Editing for a production preview URL, then changes will not be visible until the user publishes the content item. Update the preview URL to one for a staging web app that uses the GraphQL Preview access token to see any unpublished changes in the live preview.
Why do I get the server error Refused to frame 'https://...' because an ancestor violates the following Content Security Policy directive...?
- This error means that iframes are not allowed for the Prepr domain. To enable them, update the Content Security Policy in your web server like in the setup steps above.
If you have any other questions, don't hesitate to contact our Support Team (opens in a new tab).
Was this article helpful?
We’d love to learn from your feedback