# j-Edit

> El componente habilita el atributo contenteditable para elementos con clases edit o edit2.

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

El componente habilita el atributo `contenteditable` para elementos con clases `edit` o `edit2`.

- singleton
- coloque el componente bajo el elemento `<body` como `j-Directory` o `j-DatePicker`

__Es bueno saberlo__:

- cada elemento con la clase `edit` es posible editar con un solo clic
- cada elemento con la clase `edit2` es posible editar con un doble clic

__Configuración__:

- `dateformat {String}` un formato predeterminado para analizar fechas (predeterminado: `yyyy-MM-dd`)
- `exec {String}` opcional, una ruta predeterminada a `function(opt, accept(boolean/html_value_for_the_element))`
- `floating {Boolean}` opcional, puede habilitar la flotación de forma predeterminada (predeterminado: `false`)
- `minwidth {Number}` opcional, un ancho mínimo
- `offsetX {Number}` opcional, desplazamiento X
- `offsetY {Number}` opcional, desplazamiento Y

---

El atributo `data-edit` admite:

- `required {Boolean}` opcional, habilita "requerido" (predeterminado: `false`)
- `type {String}` opcional, puede ser `string` (predeterminado), `date`, `number`, `boolean`, `email`, `url` o `html`.
- `check {String}` opcional, una ruta a `function(opt, el)` debe devolver `boolean`, significa `Can the user edit that field?`
- `exec {String}` opcional, una ruta a `function(opt, accept(boolean/html_value_for_the_element))`
- `format {String}` opcional, un formato para `date`, predeterminado: `yyyy-MM-dd`
- `maxlength {Number}` una longitud máxima
- `minvalue {Number}` un mín. valor para el tipo de número (predeterminado: `undefined`)
- `maxvalue {Number}` un máx. valor para el tipo de número (predeterminado: `undefined`)
- `bind {Boolean}` si `true` vuelve a vincular `data-bind` solo en este elemento (predeterminado: `true`)
- `multiline {Boolean}` opcional, habilita multilínea + agrega la clase `editable-multiline` (`inline-block` + `width:100%`) cuando se está editando (predeterminado: `false`)
- `floating {Boolean/String}` opcional, habilita la ventana flotante para el elemento (predeterminado: `false`, `string` puede contener valores `position` o `offset`)
- `offsetX {Number}` opcional, desplazamiento X adicional para la ventana flotante
- `offsetY {Number}` opcional, desplazamiento Y adicional para la ventana flotante
- `offsetWidth {Number}` opcional, ancho adicional para la ventana flotante
- `width {Number}` opcional, ancho fijo para panel flotante
- `parent {String}` opcional, un selector para obtener el desplazamiento (puede contener `parent` o selector jQuery para el método `.closest()`)
- `selectall {Boolean}` opcional, selecciona todo el texto
- `cursor {String}` opcional, una posición del cursor `beg` o `end` (predeterminado)
- `notify {String}` opcional, una ruta a `function(opt)` que será notificada después de un cambio exitoso
- `prevent {Boolean}` opcional, ejecuta `.preventDefault()` y `.stopPropagation()` en el evento de clic
- `align {String}` opcional, establece un valor para la propiedad de alineación de texto solo para el modo flotante
- `focus {String}` opcional, un enlace al `function(opt, el)` cuando está enfocado
- `blur {String}` opcional, un enlace al `function(opt, el)` cuando está borroso
- __NEW__: `attr {String}` opcional, un nombre `data-{attr}` para obtener el valor sin formato

__Es bueno saberlo__:

- `opt.set(value)` se puede utilizar para asignar un valor.

Úselo con `<ui-component name="edit">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>
```