rainlab/editable-plugin

Editable plugin for October CMS

In-context editor plugin

This plugin allows in-context editing (click to edit) features to the OctoberCMS front-end., _(*1)

Only allocated content blocks found in the theme can be edited. Content blocks are edited with a WYSIWYG editor for htm extension and a source editor for txt and md file types. It is not suitable for editing partials and pages that have a more delicate structure., _(*2)

Implementation is simply replacing the {% content %} tags with the component., _(*3)

Proof of concept

Note while this plugin works fine, it is created as a proof of concept. Check out these other plugins that offer the same functionality (probably better):, _(*4)

• Content Editor

Using the editable component

First you must ensure that the Editable component is attached to the page or layout. Then create a content block using the CMS., _(*5)

For a content block with the file welcome.htm, that would be located in the /content directory of a theme, it can be displayed on the front end like this:, _(*6)

title = "A page"
url = "/a-page"

[editable]
==


{% component 'editable' file="welcome.htm" %}

You can also pass the file property when the component is defined, which is an alternative usage suitable for a single content block., _(*7)

title = "A page"
url = "/a-page"

[editable aboutus]
file = "welcome.htm"
==


{% component 'aboutus' %}

Replacing existing content blocks with editable content blocks.

An example content block:, _(*8)

{% content "welcome.htm" %}

This block can be made editable by using the following instead:, _(*9)

{% component 'editable' file="welcome.htm" %}

Permissions

Only administrator with the permission Manage content are able to edit content. Administrators must also be logged in to the back-end., _(*10)

Front-end JavaScript and StyleSheet

The components in this plugin provide custom stylesheet and javascript files to function correctly on the front-end. Ensure that you have {% scripts %} and {% styles %} in your page or layout., _(*11)

The styles also depend on the October JavaScript Framework, so ensure the {% framework %} tag is also included in your page or layout., _(*12)