This plugin allows in-context editing (click to edit) features to the OctoberCMS front-end. This plugin is a fork from RainLab Editable plugin but uses Translate strings instead of content blocks.
The editor has two modes: simple (only plain text and line breaks) and html (wysiwyg editor, it uses the same editor as in the backend).
Implementation is simply replacing the {{ message|_ }}
translation tags with the component {% component 'editme' message='message' %}
This plugin requires October v2. If you use October v1 you can use FW EditMe plugin
Requirements:
- RainLab Translate plugin
Using the Epigtor component
First you must ensure that the Epigtor editme component is attached to the page or layout.
It can be displayed on the front end like this:
title = "A page" url = "/a-page" [editme] == <!-- This content will be editable --> {% component 'editme' message='page.title' %}
After doing this, you will be able to edit the message from the frontend and also from the backend Settings / Translate messages.
For editing html text (wysiwyg) you only need to set the type='richeditor'
attribute:
{% component 'editme' message='page.description' type='richeditor' %}
Replacing existing translation tags with editable tags.
An example translation tag:
{{ page.title|_ }}
This tag can be made editable by using the following instead:
{% component 'editme' message='page.title' %}
Editing text fields in models
You can also edit any model text fields. For example, if you are using Rainlab.Blog plugin you can do this in you blog post page:
{% component 'editme' message='title' model=post %}
In this case the content will be loaded from the 'title' field in 'post'. And it will be saved in the same place. It also works in loops:
{% for post in posts %} {% component 'editme' message='title' model=post %} {% endfor %}
Permissions
Only administrator with the permission Manage content are able to edit content. Administrators must also be logged in to the back-end.
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.
The styles also depend on the October JavaScript Framework, so ensure the {% framework %}
tag is also included in your page or layout.
Richeditor buttons
The richeditor toolbar buttons can be customized for each control using the toolbarButtons
attribute:
{% component 'editme' message='home.title' type="richeditor" toolbarButtons="bold,italic,insertLink" %}
These are the default buttons:
paragraphFormat,paragraphStyle,quote,bold,italic,align,formatOL,formatUL,insertTable,insertLink,insertImage,insertVideo,insertAudio,insertFile,insertHR,fullscreen,html
Advanced richeditor default options
If you need to modify some advanced richeditor default options, you can do it from the System Settings, under "Editor advanced settings". After saving, all richeditor fields (both on the backend and on the frontend) will initialize with these default options. You can check the available options.
With the included example code you would be able to disable advanced list options:
+function ($) { "use strict"; $(document).render(function() { if ($.FroalaEditor) { $.FroalaEditor.DEFAULTS = $.extend($.FroalaEditor.DEFAULTS, { listAdvancedTypes: false, }); } }) }(window.jQuery);
-
This plugin has not been reviewed yet.
-
3.0.8 |
force pastePlain in richeditor Sep 24, 2024 |
---|---|
3.0.7 |
prevent space activating button when editing a text inside a button Aug 28, 2024 |
3.0.6 |
Hide edit buttons when editing an element, fix bug with fonts Aug 27, 2024 |
3.0.5 |
Allow to pass cssClass to link partial Aug 09, 2024 |
3.0.4 |
Fix bug when translate message is empty Jul 12, 2024 |
3.0.3 |
Composer version restriction Apr 03, 2024 |
3.0.2 |
Improve image edition Jan 27, 2024 |
3.0.1 |
Fix if message does not exist Nov 30, 2023 |
3.0.0 |
OctoberCMS 3.0 compatibility Nov 30, 2023 |
2.0.3 |
Fix font size in richeditor Oct 10, 2023 |
2.0.2 |
Remove forced dependencies, as they are not needed if the links or images functionalities are not used Jun 23, 2023 |
2.0.1 |
Fix bugs Nov 20, 2022 |
2.0.0 |
Image and link edition Aug 11, 2022 |
1.0.1 |
Master edit button Mar 14, 2022 |
1.0.0 |
First version of Epigtor Oct 24, 2021 |