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):
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.
-
Lukas Baum
Found the plugin useful on 5 Feb, 2020
Awesome Tool. But be aware that this plugin does not support Internet Explorer.
-
Douglas Owen
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.
-
Johny
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??
-
Juan Timana
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!
-
Doruk Eker
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.
-
Roman
Found the plugin useful on 6 Apr, 2016
Very good plugin! Almost ideal for custom pages editing. But there is two unconvenient things:
- 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?
- 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.
-
Alexey Litovchenko
Found the plugin useful on 30 Mar, 2016
Realy usefull plugin for landing page, thanks RainLab!
-
Joseph Leveque
Found the plugin useful on 12 Mar, 2016
Good plugin, I just wished it didn't wrap text components between <p> tags !
-
Vianney
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
-
Paul
Found the plugin not useful on 5 Feb, 2016
After saving, javascript is throwing exception "$.request is not a function"
-
Windaiv
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 ?
-
Julio Jacobs
Found the plugin useful on 26 May, 2015
It would be perfect if it uses Media Manager for images.
-
Alex Bass
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.
-
Tomaschp
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
-
daisuke tomimatsu
Found the plugin useful on 4 Nov, 2014
it's moving good, and nice for me!
-
Pixel Pixel Ltd
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>.
-
larrygify
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?
-
Servers
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.
-
Derek James Foster
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.
-
OctoDevel
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.
-
Gustavo Valdez
Found the plugin not useful on 28 May, 2014
Apparently broken, add ajax data but won't show way to edit.
-
Gustavo Valdez
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.
-
Dmitriy Pavlov
Found the plugin useful on 24 May, 2014
thanks for this plugin!
-
Daniel81
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 |