# j-Edit

> Le composant active l'attribut contenteditable pour les éléments avec les classes edit ou edit2.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 1099bf9573cdf86bda54f122d6c031e85a3e773f415c9462576f77372dddb15d
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Le composant active l'attribut `contenteditable` pour les éléments avec les classes `edit` ou `edit2`.

- singleton
- placez le composant sous l'élément `<body` comme `j-Directory` ou `j-DatePicker`

__Bon à savoir__ :

- chaque élément de la classe `edit` est modifiable en un seul clic
- chaque élément de la classe `edit2` est éditable en double clic

__Configuration__ :

- `dateformat {String}` un format par défaut pour l'analyse des dates (par défaut : `yyyy-MM-dd`)
- `exec {String}` facultatif, un chemin par défaut vers `function(opt, accept(boolean/html_value_for_the_element))`
- `floating {Boolean}` en option, peut activer le flottement par défaut (par défaut : `false`)
- `minwidth {Number}` en option, une largeur minimale
- `offsetX {Number}` en option, déport X
- `offsetY {Number}` en option, décalage Y

---

L'attribut `data-edit` prend en charge :

- `required {Boolean}` en option, active "obligatoire" (par défaut : `false`)
- `type {String}` en option, peut être `string` (par défaut), `date`, `number`, `boolean`, `email`, `url` ou `html`
- `check {String}` facultatif, un chemin vers `function(opt, el)` doit renvoyer `boolean`, cela signifie `Can the user edit that field?`
- `exec {String}` en option, un chemin vers `function(opt, accept(boolean/html_value_for_the_element))`
- `format {String}` en option, un format pour `date`, par défaut : `yyyy-MM-dd`
- `maxlength {Number}` une longueur maximale
- `minvalue {Number}` une minute. valeur pour le type de numéro (par défaut : `undefined`)
- `maxvalue {Number}` un maximum. valeur pour le type de numéro (par défaut : `undefined`)
- `bind {Boolean}` si `true` relie `data-bind` sur cet élément uniquement (par défaut : `true`)
- `multiline {Boolean}` en option, active le multiligne + ajoute la classe `editable-multiline` (`inline-block` + `width:100%`) lors de l'édition (par défaut : `false`)
- `floating {Boolean/String}` en option, active la fenêtre flottante pour l'élément (par défaut : `false`, `string` peut contenir des valeurs `position` ou `offset`)
- `offsetX {Number}` en option, décalage X supplémentaire pour la fenêtre flottante
- `offsetY {Number}` en option, décalage Y supplémentaire pour la fenêtre flottante
- `offsetWidth {Number}` en option, largeur supplémentaire pour la fenêtre flottante
- `width {Number}` en option, une largeur fixe pour panneau flottant
- `parent {String}` en option, un sélecteur pour l'obtention du offset (peut contenir `parent` ou un sélecteur jQuery pour la méthode `.closest()`)
- `selectall {Boolean}` en option, sélectionne tout le texte
- `cursor {String}` en option, une position du curseur `beg` ou `end` (par défaut)
- `notify {String}` facultatif, un chemin vers `function(opt)` qui sera notifié après une modification réussie
- `prevent {Boolean}` facultatif, exécute `.preventDefault()` et `.stopPropagation()` en cas de clic
- `align {String}` facultatif, définit une valeur pour la propriété text-align pour le mode flottant uniquement
- `focus {String}` en option, un lien vers le `function(opt, el)` lorsqu'il est focalisé
- `blur {String}` en option, un lien vers le `function(opt, el)` lorsqu'il est flou
- __NEW__ : `attr {String}` facultatif, un nom `data-{attr}` pour récupérer la valeur non formatée

__Bon à savoir__ :

- `opt.set(value)` peut être utilisé pour attribuer une valeur

Utilisez-le avec `<ui-component name="edit">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

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