Editing pages

Editing on the website

Since 2.4, you can edit a page directly on the website: texts in place, blocks moved, hidden or deleted, a block form in a side panel. Everything is saved at once.

Who can edit

• Administrators signed in to the back-office with the Manage block pages permission. See Permissions and settings.
• Only PageTree pages are concerned: the CMS pages of your theme do not change.
• Visitors never get the edit mode: no button, no script, no extra markup. Their page is the same as before 2.4.

Switching to edit mode

1. Sign in to the back-office, then open a PageTree page on the website, for example with Open page in the editor.
2. Click Edit page, at the bottom of the window.
3. The page reloads in Editing mode: a frame surrounds the window and an action bar appears at the bottom.

The edit mode is switched on for this page only: the other pages of the website are shown as visitors see them, with the Edit page button. Exit editing returns to the normal page.

Editing a text in place

• On hover, the editable texts are outlined with dashes. Click one to edit it.
• Enter confirms, Esc cancels. In a text on several lines (subtitle, quote…), Shift+Enter adds a line break.
• Clicking elsewhere also confirms the change.

The built-in blocks make their titles, texts, buttons and captions editable. The other fields (images, links, settings) are edited in the block form. Custom blocks and your own blocks can make their fields editable too: see For developers.

The block toolbar

Hover a block to show its toolbar:

The block form

1. Click Edit this block. The Edit block panel opens on the right with the same form as in the editor.
2. Change the fields: the page is updated as you type.
3. Restore the block gives the block back the values it had when the panel was opened. Close the panel when you are done.

The panel can be pinned beside the page: the page shrinks to make room for it. Drag its edge to change its width.

The action bar

• Undo / Redo (Ctrl+Z, Ctrl+Y): go back over the unsaved changes.
• Save (Ctrl+S): publishes all the changes at once. Discard drops them.
• History: lists the versions of the page, like in the editor. See below.
• Responsive preview: shows the page at desktop, tablet or mobile width.
• Language: with RainLab.Translate and several languages, chooses the language you edit.
• Open in the editor: opens the page in the back-office editor, in a new tab.
• Exit editing: returns to the normal page. If some changes are not saved, a confirmation warns you.

Saving

• Every save records a version in the history, like a save from the editor.
• If the page was changed elsewhere (in the editor or by another administrator) since you opened it, the save is refused so these changes are not overwritten. Reload the page, then make your changes again.
• The title, URL, layout, publishing and SEO are not edited on the website: use the editor.

History on the website

1. Click History in the action bar: the versions are listed in the side panel.
2. Preview a version: its blocks replace the blocks of the page and the version is marked Previewed.
3. Save puts this version back online (as a new version). Back to the current version leaves the preview.

Inactive, unpublished or scheduled pages

Administrators who can edit the pages also open the inactive, unpublished or scheduled pages on the website. A banner shows their status: “Only visible to editors: visitors get a 404 error.”

To see the website as a visitor, use a private window or sign out of the back-office.

Links in the page

In edit mode, as in the editor preview, the links of the page are disabled so you do not leave the page by mistake when clicking a text. A message reminds you of it. Exit editing to browse.

For developers

To make a field of your block editable in place, print it with the pagetreeEditable Twig filter and the field name:

<h2>{{ data.title|pagetreeEditable('title') }}</h2>
<p>{{ data.text|pagetreeEditable('text', 'multiline') }}</p>
<div>{{ data.content|pagetreeEditable('content', 'html') }}</div>

• The filter escapes the value exactly like the equivalent output. It adds a marker only in edit mode and in the editor preview: visitors get the same HTML as without the filter.
• The filter works in the templates of PHP blocks and of custom blocks.
• Without the filter, a block works as before: it is edited through its form.