# j-Edit

> The component enables contenteditable attribute for elements with edit or edit2 classes.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 932bda43cc5628615fe094453501b336f6f999201fbf48cc755da49a475eb1cb
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

The component enables `contenteditable` attribute for elements with `edit` or `edit2` classes.

- singleton
- put the component under `<body` element like `j-Directory` or `j-DatePicker`

__Good to know__:

- each element with the `edit` class is possible to edit with a single click
- each element with the `edit2` class is possible to edit with a double click

__Configuration__:

- `dateformat {String}` a default format for parsing dates (default: `yyyy-MM-dd`)
- `exec {String}` optional, a default path to `function(opt, accept(boolean/html_value_for_the_element))`
- `floating {Boolean}` optional, can enables floating by default (default: `false`)
- `minwidth {Number}` optional, a min width
- `offsetX {Number}` optional, X offset
- `offsetY {Number}` optional, Y offset

---

`data-edit` attribute supports:

- `required {Boolean}` optional, enables "required" (default: `false`)
- `type {String}` optional, can be `string` (default), `date`, `number`, `boolean`, `email`, `url`, or `html`
- `check {String}` optional, a path to `function(opt, el)` must return `boolean`, it means `Can the user edit that field?`
- `exec {String}` optional, a path to `function(opt, accept(boolean/html_value_for_the_element))`
- `format {String}` optional, a format for `date`, default: `yyyy-MM-dd`
- `maxlength {Number}` a maxlength
- `minvalue {Number}` a min. value for number type (default: `undefined`)
- `maxvalue {Number}` a max. value for number type (default: `undefined`)
- `bind {Boolean}` if `true` rebinds `data-bind` on this element only (default: `true`)
- `multiline {Boolean}` optional, enables multiline + appends class `editable-multiline` (`inline-block` + `width:100%`) when it's editing (default: `false`)
- `floating {Boolean/String}` optional, enables floating window for the element (default: `false`, `string` can contain `position` or `offset` values)
- `offsetX {Number}` optional, additional X offset for the floating window
- `offsetY {Number}` optional, additional Y offset for the floating window
- `offsetWidth {Number}` optional, additional width for the floating window
- `width {Number}` optional, a fixed width for floating panel
- `parent {String}` optional, a selector for obtaining of offset (can contain `parent` or jQuery selector for `.closest()` method)
- `selectall {Boolean}` optional, selects all text
- `cursor {String}` optional, a cursor position `beg` or `end` (default)
- `notify {String}` optional, a path to `function(opt)` that will be notified after successful change
- `prevent {Boolean}` optional, executes `.preventDefault()` and `.stopPropagation()` in the click event
- `align {String}` optional, sets a valeu for the text-align property for the floating mode only
- `focus {String}` optional, a link to the `function(opt, el)` when it's focused
- `blur {String}` optional, a link to the `function(opt, el)` when it's blurred
- __NEW__: `attr {String}` optional, an `data-{attr}` name to get the unformatted value

__Good to know__:

- `opt.set(value)` can be used to assign a value

Use it with `<ui-component name="edit">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```html example.html
<ui-component name="edit"></ui-component>

<ui-plugin path="form" style="width:500px;padding:10px;border:1px solid #E0E0E0">

	<div class="row m">
		<div class="col-xs-3">
			Name:
		</div>
		<div class="col-xs-9">
			<ui-bind class="edit2 block" data-edit="required:1;floating:1" path="?.name" config="html" style="height:24px;background-color:#E0E0E0"></ui-bind>
		</div>
	</div>
	<div class="row m">
		<div class="col-xs-3">
			Email:
		</div>
		<div class="col-xs-9">
			<div class="edit" data-edit="required:1;type:email;exec:save_email" style="height:24px;background-color:#E0E0E0">@</div>
		</div>
	</div>
	<div class="row m">
		<div class="col-xs-3">
			HTML:
		</div>
		<div class="col-xs-9">
			<ui-bind  class="edit block" data-edit="multiline:1;floating:1;type:html" path="form.html" config="html" style="min-height:24px;background-color:#E0E0E0"></ui-bind>
		</div>
	</div>
	<pre><ui-bind path="?" config="html:JSON.stringify(value, null, '  ')"></ui-bind></pre>
</ui-plugin>

<script>

	function save_email(opt, next) {
		SET('form.email', opt.value);
		// next(true);
		// next(false) OR next(null) cancels the change
		next(opt.value.toUpperCase());
	}

	var form = {};
	form.html = '<b>Hello world!</b>';
	form.name = 'UI components';

</script>
```