Editable

Creates a layer from the specified element with the ability to edit the content.

Usage #

The Editable module is designed for easy and quick editing of small texts. This is not a full-featured text editor. So, everything is made for the sake of simplicity and reliability: pasting only plain-text and Enter key does not cause a line break.

Let's look how to edit a heading tag.

<h1 data-kube="editable" placeholder="Enter text here...">...</h1>

The editing of a div layer.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div data-kube="editable" placeholder="Enter text here...">...</div>

Settings #

focus

Type: Boolean

Default: false

This option allows to set the focus to the editable layer.

<div data-kube="editable" data-focus="true">...</div>

Methods #

Method Description
stop Remove the contenteditable attribute from the element and make it is non editable.
start Add the contenteditable attribute and make the element is editable.

Use API inside modules

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        show: function()
        {
            // all editable on the page
            this.app.api('editable.stop');

            // for specified editable with ID or data-name
            this.app.api('editable.myeditable.stop')
        }
    });
})(Kube);

How to add the ID or data-name for editable:

<div data-name="myeditable" data-kube="editable">...</div>

// or ID
<div id="myeditable" data-kube="editable">...</div>

Use API from outside

//  all editable on the page
<button onclick="$K.api('editable.stop');">Stop</button>

// for specified editable with ID or data-name
<button onclick="$K.api('editable.myeditable.start');">Start</button>