Inline Editing

Inline editing can be added so that site admins can edit content on the front-end itself. When enabled a floating wrench icon 🔧 will appear on editable pages which can be clicked to trigger the editor.

In order to set this up we need to add the following to our frontend template:

<?php
$content = $cms->get('home');
?>

<h1 sl-id="home.heading" sl-type="text">
  <?=$content['heading'];?>
</h1>

<div sl-id="home.copy" sl-type="editor">
  <?=$content['copy'];?>
</div>

<?php 
load_js('shiftlib');
$cms->load_page_editor();
?>

We select the content using $cms->get and output it on the page as per normal. There are a few lines at the end where we load the shiftlib js library and initiate the page editor, alternatively, these could go in template.php if used on multiple pages. Note that the editor will only appear if logged in as admin, so no additional permission checks are needed.

The editing is facilitated by the magical attributes on the HTML elements.

sl-id

This references the table, id and field name. In this example, for home.copy we are editing the copy field in the home table. The home table does not have an id column so the id is omitted. If there was an id it could be referenced as follows: table[id].field. E.g. sl-id="news[1].heading".

sl-type

This references the field type which will determine which editor component is used. The current supported values are:

text

Single-line text field

heading

Single-line text field with formatting

copy

Rich text editor