# j-Edit

> Die Komponente aktiviert das contenteditable-Attribut für Elemente mit den Klassen edit oder edit2.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 84dd916a88e3ab5965dce31815659c8eeba12a38541ba5a96e8566ea26ccd0f9
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Die Komponente aktiviert das Attribut `contenteditable` für Elemente mit den Klassen `edit` oder `edit2`.

- Singleton
- Platzieren Sie die Komponente unter dem Element `<body` wie `j-Directory` oder `j-DatePicker`

__Gut zu wissen__:

- Jedes Element mit der Klasse `edit` kann mit einem einzigen Klick bearbeitet werden
- Jedes Element mit der Klasse `edit2` kann mit einem Doppelklick bearbeitet werden

__Konfiguration__:

- `dateformat {String}` ein Standardformat zum Parsen von Datumsangaben (Standard: `yyyy-MM-dd`)
- `exec {String}` optional, ein Standardpfad zu `function(opt, accept(boolean/html_value_for_the_element))`
- `floating {Boolean}` optional, kann Floating standardmäßig aktivieren (Standard: `false`)
- `minwidth {Number}` optional, eine Mindestbreite
- `offsetX {Number}` optional, X-Offset
- `offsetY {Number}` optional, Y-Offset

---

Das `data-edit`-Attribut unterstützt:

- `required {Boolean}` optional, aktiviert „erforderlich“ (Standard: `false`)
- `type {String}` optional, kann `string` (Standard), `date`, `number`, `boolean`, `email`, `url` oder `html` sein
- `check {String}` optional, ein Pfad zu `function(opt, el)` muss `boolean` zurückgeben, was `Can the user edit that field?` bedeutet
- `exec {String}` optional, ein Pfad zu `function(opt, accept(boolean/html_value_for_the_element))`
- `format {String}` optional, ein Format für `date`, Standard: `yyyy-MM-dd`
- `maxlength {Number}` eine maximale Länge
- `minvalue {Number}` pro Minute. Wert für Nummerntyp (Standard: `undefined`)
- `maxvalue {Number}` max. Wert für Nummerntyp (Standard: `undefined`)
- `bind {Boolean}`, wenn `true` `data-bind` nur für dieses Element erneut bindet (Standard: `true`)
- `multiline {Boolean}` optional, aktiviert Mehrzeilen + hängt die Klasse `editable-multiline` (`inline-block` + `width:100%`) an, wenn sie bearbeitet wird (Standard: `false`)
- `floating {Boolean/String}` optional, aktiviert schwebendes Fenster für das Element (Standard: `false`, `string` kann `position`- oder `offset`-Werte enthalten)
- `offsetX {Number}` optional, zusätzlicher X-Offset für das schwebende Fenster
- `offsetY {Number}` optional, zusätzlicher Y-Offset für das schwebende Fenster
- `offsetWidth {Number}` optional, zusätzliche Breite für das schwebende Fenster
- `width {Number}` optional, eine feste Breite für schwebendes Panel
- `parent {String}` optional, ein Selektor zum Erhalten des Offsets (kann `parent` oder jQuery-Selektor für die Methode `.closest()` enthalten)
- `selectall {Boolean}` optional, wählt den gesamten Text aus
- `cursor {String}` optional, eine Cursorposition `beg` oder `end` (Standard)
- `notify {String}` optional, ein Pfad zu `function(opt)`, der nach erfolgreicher Änderung benachrichtigt wird
- `prevent {Boolean}` optional, führt `.preventDefault()` und `.stopPropagation()` im Klickereignis aus
- `align {String}` optional, legt einen Wert für die text-align-Eigenschaft nur für den Floating-Modus fest
- `focus {String}` optional, ein Link zum `function(opt, el)`, wenn es fokussiert ist
- `blur {String}` optional, ein Link zum `function(opt, el)`, wenn es unscharf ist
- __NEW__: `attr {String}` optional, ein `data-{attr}`-Name, um den unformatierten Wert zu erhalten

__Gut zu wissen__:

- Mit `opt.set(value)` kann ein Wert zugewiesen werden

Verwenden Sie es mit `<ui-component name="edit">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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