Inline editing - limburgie/c3s GitHub Wiki

With the automatic support for inline editing in C3S your content editors can start editing content directly from your website. This way, they don't have to search through the whole CMS for the article they want to edit. Inline editing requires setting an HTML data attribute on the element you want to be editable. After that, editors can enable edit mode by pressing the "e" key on their keyboard.

To enable inline editing on an element, you have to add the data-c3s-id attribute to the element that contains the visualisation of the content item. This attribute has to be populated with the ID of the content item:

<ul>
<#list api.query("news").findAll() as item>
    <li data-c3s-id="${item.id}">${item.getText("title")}</li>
</#list>
</ul>

A Javascript is automatically injected into each C3S page that will search for this data attribute and generate an edit link inside that element. So the generated source code (after parsing) will look something like this:

<ul> 
    <li data-c3s-id="W55CUiYAACUATviN">
        Nullam id dolor id nibh ultricies vehicula ut id elit. 
        <a href="/c3s/W55CUiYAACUATviN" target="_blank" class="c3s-edit-link" style="display: none;"></a>
    </li> 
    <li data-c3s-id="W55CRCYAACYATvhM">
        Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. 
        <a href="/c3s/W55CRCYAACYATvhM" target="_blank" class="c3s-edit-link" style="display: none;"></a>
    </li> 
    <li data-c3s-id="WwrDWSkAAPo30YZo">
        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
        <a href="/c3s/WwrDWSkAAPo30YZo" target="_blank" class="c3s-edit-link" style="display: none;"></a>
    </li> 
</ul>

Notice that the links are hidden by default. See the "User manual" below how the visibility of the links can be toggled.

You can style the edit link as desired. E.g. to display the word "Edit", do something like this:

.c3s-edit-link:after {
    content: "Edit";
}

On an editing enabled C3S site, an author (or anyone, really) can simply press the "e" key on the keyboard (for desktop browsers) or shake the device (for mobile device browsers, except for Safari on iOS) to toggle the visibility of the edit links.

Pressing the "e" key or shaking the device once will show all links. Press the "e" key or shake the device again (or refresh the page) to hide them again.

All edit links will open in a new tab by default.