Converts html elements to editable fields and send the data to a target element or publish a notification on mediator.
<ol>
<li>
<input id="valueId" value="Edit the other div to change my value" class="w-100" />
</li>
<li>
<div id="editable-div1" data-fc-modules="editable" data-fc-class="w-100" d data-fc-tag="input" data-fc-input-id="valueId" data-fc-edit-type="full" data-fc-enter-behaviour="stopedit">
Click me, edit me and I will update the input
</div>
</li>
</ol>
<ol>
<li>
<div id="editable-div2" data-fc-modules="editable" data-fc-mediator="channel:any" data-fc-tag="input" data-fc-class="any">
Click the buttons bellow me to toggle editable.
</div>
</li>
<li>
<a onclick="$('#editable-div2').trigger('editable', {editable: true})" class="button _small _success">Editable=true</a>
<a onclick="$('#editable-div2').trigger('editable', {editable: false})" class="button _small _error">Editable=false</a>
</li>
</ol>
Mediator event to publish new data when editable value is changed.
Editable element tag, when field is set to editable state, original element is hidden an a new element tied to original is created using this tag.
DEFAULT: input
Class for the new editable element.
If specified, value changes will also be stored on element with indicated ID.
Manages click/focusout events to automate editable state. 'full' => 'click' + 'focusout'. 'click' => When element is clicked, editable state is triggered automatically & element gets focus. 'focusout' => When element lost focus, not editable state is triggered automatically.
DEFAULT: none
Allow to change enter key behaviour on editable element. 'block' => Ignore enter key, useful to avoid form submissions. 'stopedit' => Enter forces component no editable state.
DEFAULT: none
Disables this component in any mobile or tablet device (touch devices)
DEFAULT: true
Placeholder text if the html element is empty
DEFAULT: Edit here