25

Product support

Visit this product's website for support.

  • Added on May 23, 2014
  • Current version: 1.0.7
  • Platform Compatibility
    v3.x not tested
    v2.x not tested
    v1.x use latest
  • Created by
  • Public repository

Categories

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

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.

Implementation is simply replacing the {% content %} tags with the component.

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):

The title area is editable content

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.

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:

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

[editable]
==

<!-- This content will be 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.

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

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

<!-- This content will be editable -->
{% component 'aboutus' %}

Replacing existing content blocks with editable content blocks.

An example content block:

{% content "welcome.htm" %}

This block can be made editable by using the following instead:

{% 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.

  • Found the plugin useful on 5 Feb, 2020

    Awesome Tool. But be aware that this plugin does not support Internet Explorer.

  • Found the plugin useful on 22 Feb, 2019

    Good, but page editing drops characters or changes words to what it believes is better. I'm getting frustrated as it changes some words on me that are mandatory for what I am doing.

  • Found the plugin useful on 28 Jul, 2016

    It is useful but anyone know how to limit lenght o characters in content? For example I let user write only 100 characters in editable. How can i do this??

  • Found the plugin useful on 6 Jun, 2016

    Amazing plugin. But I'd like this even more if you could support uploading images/media. That would make this plugin absolutely perfect. Thanks!

  • Found the plugin useful on 23 May, 2016

    Useful plugin. It got me some time to figure out that I need to place {% scripts %} and {% framework %} in the <body> part of the layout. and {% styles %} to the <head> part.

    Suggestions:

    • Make it work with images/media
    • Let it add content in the <p> tag. So only editing content, not layout or styling of the page.

  • Found the plugin useful on 6 Apr, 2016

    Very good plugin! Almost ideal for custom pages editing. But there is two unconvenient things:

    1. where editable is a .txt content placed (and code editor is fired instead of wysiwyg) in editor window the text is wraped by <p>. I didn't find how to fix that, but it is really annoying to remove that <p> on each content edition. Would you please help to fix that bug?
    2. In loged in mode content of edited by this plugin text is styled as blocks and if used in inline context that ruined the visual similarity to page seen by anonymous visitor.

  • Found the plugin useful on 30 Mar, 2016

    Realy usefull plugin for landing page, thanks RainLab!

  • Found the plugin useful on 12 Mar, 2016

    Good plugin, I just wished it didn't wrap text components between <p> tags !

  • Found the plugin useful on 16 Feb, 2016

    Very good plugin!

    Suggestion #1: Add inline editing for single words. If I want my client to edit single words or headings, I always have to create a new content file only for a single word. It would be nice to be able to add a class (ie "editable") to a html tag, to be able to edit the html between the opening and closing tags.

    Suggestion #2: Add content files for active languages automatically. I often work on projects that offer multilingual websites. For each editable content block I have to create content files for the different languages. Furthermore the client can't add those content blocks by himself when adding another language when the project is done. Is it possible to display the active languages in the frontend together with an indicator which languages already have got translated blocks and if they don't have them, let them be created by the plugin?

    I could help with the UI for suggestions #2. Anyone else interested? Thank you

  • Found the plugin not useful on 5 Feb, 2016

    After saving, javascript is throwing exception "$.request is not a function"

  • Found the plugin useful on 19 Nov, 2015

    Not work code in content page <img src="{{ 'assets/img/page1_icon2.png'|theme }}" > Works in manual fixed code <img src="themes/led-group/assets/img/page1_icon1.png"> How to include {{' '}} code ?

  • Found the plugin useful on 26 May, 2015

    It would be perfect if it uses Media Manager for images.

  • Found the plugin useful on 25 Feb, 2015

    Love it, trying to utilize it for client content editing at the moment. It's a bit tough though using a version control system like Git and allowing clients to edit file-based content though instead of that stored in a database.

    The workaround for this at the moment is just putting all of the content in the content directory and not version-controlling the content. It's a bit scary to not have it properly backed up with the rest of the site and I'm looking to find a better way to deal with this, but for the time being - editable has worked great for allowing clients to easily edit content.

  • Found the plugin useful on 3 Dec, 2014

    great plugin! took me a while to realise that their documentation section isn't as detailed as their documentation on GitHub which has essential parts like making sure that the plugin has the {%styles%} {%scripts%} AND {%framework%} / {%framework extra%} included somewhere on the page or layout.... apart from that! Great

  • Found the plugin useful on 4 Nov, 2014

    it's moving good, and nice for me!

  • Found the plugin useful on 10 Oct, 2014

    In some cases I found (or thought) the plugin was not working, and it turns out you need to make sure that {% scripts %} is present in the layout and also {% styles %} in the <head>.

  • Found the plugin useful on 22 Sep, 2014

    Hi, Great plugin but im having issues with the editable piece not showing up whether i hover or not. Same issue as Servers i guess....... Any help or fix for this?

  • Found the plugin not useful on 13 Aug, 2014

    Doesnt work. Follow the documentation and there is no edit icon or anything when I hover over the text. Maybe im missing some things, but my theme has a custom bootstrap installation. Could you list all the components in the docs that need to be called please?

    I have enabled ajaz,, jquery and loaded the core bootsrap library. But something must be missing.

  • Found the plugin useful on 6 Jun, 2014

    Works nice to change the content, but when I changed three divs that were floating next to eachother on my front page it made the divs stack on top of eachother and become left aligned, checked out the modified code and it seems there were random closing p tags before each h1 tag I had placed. Interesting bug, but easy to workaround if I'm working on a static content page that won't be viewable by the public until it's perfect.

  • Found the plugin useful on 5 Jun, 2014

    Great plugin! Gustavo, mouse over the editable area once and then go back and stop the mouse on top of the editable area that the icon will appear to edit. Don't forget: Only administrator with the permission Manage content are able to edit content. Administrators must also be logged in to the back-end.

  • Found the plugin not useful on 28 May, 2014

    Apparently broken, add ajax data but won't show way to edit.

  • Found the plugin useful on 28 May, 2014

    I added the component to my page and replaced to content block with the component, but I still have no idea how to edit the content.

  • Found the plugin useful on 24 May, 2014

    thanks for this plugin!

  • Found the plugin useful on 23 May, 2014

    Great addition!

1.0.7

Fixed size() is not a function bug, granted access to users with `rainlab.pages.manage_content`, added Hungarian, Turkish, & Slovenian translations.

Dec 10, 2019

1.0.6

Remove dependency on backend rich editor control.

May 21, 2016

1.0.5

Fixed button css issue

Mar 13, 2015

1.0.4

Fixed references to Redactor's "get" and "destroy" methods

Oct 10, 2014

1.0.3

Content save error fix

Oct 08, 2014

1.0.2

Minor security update

Jul 25, 2014

1.0.1

First version of Editable

May 23, 2014