# j-Edit

> Komponenten möjliggör innehållsredigerbar attribut för element med redigering eller redigera2 klasser.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sv
Content-SHA256: 4ac7c69c211402142eacf792bc5ec331771f4dab3612a0db2cb4ac8e7119b562
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Komponenten möjliggör `contenteditable` attribut för element med `edit` eller `edit2` klasser.

- singlar
- Lägg komponenten under `<body`-elementet som `j-Directory` eller `j-DatePicker`

__Bra att veta__:

- Varje element med `edit`-klassen kan redigeras med ett enda klick
- Varje element med `edit2`-klassen kan redigeras med ett dubbelklick

__Konfigurera__:

- `dateformat {String}` ett standardformat för parsingdatum (default: `yyyy-MM-dd`)
- `exec {String}` valfritt, en standardväg till `function(opt, accept(boolean/html_value_for_the_element))`
- `floating {Boolean}` är valfritt, kan aktivera standardflygning (default: `false`)
- `minwidth {Number}` valfritt, en min bredd
- `offsetX {Number}` alternativ, X offset
- `offsetY {Number}` alternativ, Y offset

---

`data-edit` stöds av:

- `required {Boolean}` valfritt, möjliggör "nödvändigt" (default: `false`)
- `type {String}` kan vara `string` (default), `date`, `number`, `boolean`, `email`, `url`, eller `html`
- `check {String}` är valfritt, en väg till `function(opt, el)` måste returnera `boolean`, det vill säga `Can the user edit that field?`
- `exec {String}` alternativ, en väg till `function(opt, accept(boolean/html_value_for_the_element))`
- `format {String}` valfritt, ett format för `date`, standard: `yyyy-MM-dd`
- `maxlength {Number}` max längd
- `minvalue {Number}` en min. värde för siffror typ (default: `undefined`)
- `maxvalue {Number}` en max. värde för siffror typ (default: `undefined`)
- `bind {Boolean}` om `true` återförenar `data-bind` endast på detta element (default: `true`)
- `multiline {Boolean}` valfritt, möjliggör multiline + append klas `editable-multiline` (`inline-block` + `width:100%`) när det är redigering (default: `false`)
- `floating {Boolean/String}` valfritt, möjliggör flytande fönster för elementet (default: `false`, `string` kan innehålla värden `position` eller `offset`)
- `offsetX {Number}` valfritt, extra X-offset för det flytande fönstret
- `offsetY {Number}` valfritt, extra Y-avset för det flytande fönstret
- `offsetWidth {Number}` valfritt, extra bredd för det flytande fönsteret
- `width {Number}` valfritt, en fast bredd för flytande panel
- `parent {String}` valfritt, en selektor för att få offset (kan innehålla `parent` eller jQuery selektoren för `.closest()`-metoden)
- `selectall {Boolean}` valfritt, Välj hela texten
- `cursor {String}` valfritt, en kursor position `beg` eller `end` (default)
- `notify {String}` valfritt, en väg till `function(opt)` som kommer att meddelas efter framgångsrik förändring
- `prevent {Boolean}` valfritt, utför `.preventDefault()` och `.stopPropagation()` i klick händelsen
- `align {String}` valfritt, ställer in en valeu för textliknande egenskaper för flödesläget endast
- `focus {String}` valfritt, en länk till `function(opt, el)` när den är fokuserad
- `blur {String}` valfritt, en länk till `function(opt, el)` när den är blurad
- __NEW__: `attr {String}` valfritt, ett `data-{attr}` namn för att få det obformat värdet

__Bra att veta__:

- `opt.set(value)` kan användas för att tilldela ett värde

Använd den med `<ui-component name="edit">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

```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>
```