Front-end Editing

Overview

For any user logged in with a sufficient level of access permissions, ExpressionEngine Pro adds “front edit” links ( ) that allow editing an entry’s data field by field. When enabled, editing can be done directly on front-end without needing to go to the Control Panel.

Clicking the link icon opens a popup for that specific field so that its content can be modified and saved. The user can also switch to editing with the full entry interface (with live preview functionality if it has been set up for that channel).

By default, edit links are added into the HTML right before where the field tag is called (the opening tag if a field tag pair is used).

Permissions: Users must be: a) logged-in on the front-end of the site and b) must have a role assigned to them which allows them to access and edit content for that entry’s channel.

.

Saving Content

After editing data, content can be saved in one of two ways:

• Clicking directly on “Save”, which will trigger a page reload

• Clicking the alternate “Save without Reload” choice, which will save the content but will not reload the page. This choice requires a manual page refresh to see any updated content but is quicker, especially if you are planning to edit multiple fields or entries on a page.

Unsaved Changes

When a user has edited data and has unsaved changes, Pro will create an autosave of the entry and display an alert notification on the edit window with the unsaved changes. The autosave is triggered based on the autosave interval setting. If you want to ensure users do not accidentally lose unsaved changes, adjust the [autosave_interval_seconds] system config override to a shorter interval between autosaves. A setting of 10 seconds is recommended.

Note: If the [autosave_interval_seconds] system config value was not previously set, upon install, Pro will set this value in the config file to be 10 seconds. However, if for some reason this value is not set explicitly, the default value is 60 seconds.

Note: Autosave data is kept for a default of 6 hours. This can be adjusted via the [autosave_prune_hours] system config value.

Example Usage:

$config['autosave_interval_seconds'] = '10';
$config['autosave_prune_hours'] = '6';

Enable/Disable the Front Edit Links

There are multiple ways to enable or disable front-end editing links:

• Globally with configuration overrides
• In the Front-End Editing Settings where you control the Dock overall.
• Per field in the field settings
• By the user on the front-end via the Dock, by toggling Edit Mode on/off.
• In the Template Settings of an individual template
• In the template by using ExpressionEngine template comments, HTML comments, or the disable field parameter
• By granting or removing editing access to a user role

Using ExpressionEngine Comments

Any content wrapped in these EE comments will not have edit links in it.

<h1>{!-- disable frontedit --}{title}{!-- //disable frontedit --}</h1>

Hint: If you need to disable front-end edit on large number of templates completely, wrap these comments around content using a layout template.

Using HTML Comments

Any content wrapped in these HTML comments will not have edit links in it.

<h1><!-- disable frontedit -->{title}<!-- //disable frontedit --></h1>

Hint: If you need to disable front-end edit on large number of templates completely, wrap these comments around content using a layout template.

Field Tag Parameter

Use the disable="frontedit" parameter on a field tag to disable the edit link for a specific field.

{page_content disable="frontedit"}

Customizing the Link

The edit link icon for each field can be output in another part of the HTML by using :frontedit modifier on the field tag. Or, by using the frontedit_link tag, you can have a raw link in a different section of a template which can be custom styled. You can also use this to place an edit icon or link for a field that is currently not on the page.

{title:frontedit}

<h1>
    <!-- disable frontedit -->{title}<!-- //disable frontedit -->
    {frontedit_link entry_id="{entry_id}" field_name="title"}
</h1>

{page_content disable="frontedit"}
{frontedit_link entry_id="{entry_id}" field_name="page_content" class="extra-styles"}

Conditional Tags

{if frontedit}Edit Entry Title{/if}{frontedit_link entry_id="{entry_id}" field_name="title"}

Reinitialize ExpressionEngine Pro Javascript

There may be times, such as when using AJAX, that page content is loaded after ExpressionEngine Pro has already initialized on a page. When this happens, edit links may not work or even render. To fix this, you can include EE.pro.refresh(); in your script.

Example usage:

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : reInitPro
    })
}

function reInitPro(){
    EE.pro.refresh();
}