# j-CloudEditorSimple

> Es una alternativa sencilla a j-CloudEditor. Puede especificar la configuración principal en la configuración y el valor es {String} (en j-CloudEditor la configuración es parte del valor).

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

Es una alternativa sencilla a `j-CloudEditor`. Puede especificar la configuración principal en la configuración, y el valor es `{String}` (en `j-CloudEditor` la configuración es parte del valor).

- funciona en el iframe
- admite múltiples cursores (`shift + cmd + arrow-down/up`)
- admite la búsqueda de texto seleccionado (`cmd + d`)
- admite barras de desplazamiento personalizadas
- soporta rastreador de diferencias
- admite un complemento emmet simple
- admite colaboración en tiempo real
- código fuente: <https://github.com/totaljs/editor>
- utiliza el editor: [CodeMirror](https://codemirror.net/)
- código muy pequeño

__Configuración__:

- `parent {String}` un selector para el contenedor principal (predeterminado: `auto`)
- `autosave {Number}` vuelve a vincular automáticamente el valor del editor a la ruta del componente (en milisegundos, valor predeterminado: `500`)
- `event {String}` un camino hacia el `function(name, value)`
	- `click`
	- `errors`
	- `shortcut`
	- `cursor` contiene la posición del cursor
	- `change` contiene cambios parciales para la colaboración en tiempo real (`config.realtime` debe ser `true`)
- `contextmenu {String}` un camino hacia el `function(opt)`
- `realtime {Boolean}` permite enviar cambios en tiempo real al método `event` (el nombre del evento es `change`), predeterminado: `true`
- `keywords {String}` palabras clave personalizadas en el formulario, p. `ID,PATH`
- `minheight {Number}` opcional, una altura mínima (por defecto: `0`)
- `margin {Number}` opcional, un margen vertical (predeterminado: `0`)
- `linenumbers {Boolean}` opcional, habilita números de línea (predeterminado: `true`)
- `type {String}` opcional, tipo de contenido (predeterminado: `clientside`)
- __NUEVO__: `url {String}` opcional, un enlace al editor (predeterminado: `//cdn.componentator.com/editor/1.min.html`)

__Método__:

- `component.insert('some text')`
- `component.replace('text', 'newvalue')`
- `component.search('text', callback(output))`
- `component.select(from, [to])`
- `component.goto(pos)`
- `component.focus()`
- `component.save(callback(value))`
- `component.marker(name, [from], [to], [color])` agrega + modifica (con `from`) y elimina (sin argumento `from`) el marcador
- `component.change(changes)` para la colaboración en tiempo real (`changes` se puede generar en la función `config.event`)
- `component.clear()` borra todos los cambios
- `component.replaceselections(selections)`
- `component.replaceselection(selection)`
- `component.replacerange(value, from, [to])`
- `component.command(cmd)` ejecuta el método `codemirror.execCommand()`
- `component.exec(a, [b], [c])` ejecuta el método `document.execCommand(a, b, c)`

__IMPORTANTE__:

Los argumentos `from`, `to`, `pos` deben tener el formato: `{ line: Number, ch: Number }`.

Úselo con `<ui-component name="cloudeditorsimple">`. 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="LAZY menu"></ui-component>

<div style="width:600px;height:200px;border:1px solid #E0E0E0">
	<ui-component name="cloudeditorsimple" path="editorbody" config="contextmenu:editor_contextmenu;realtime:1"></ui-component>
</div>
<div class="clearfix"></div>

<script>

	var editorbody = '\n\n<h1>HELLO WORLD</h1>\n\n';

	function editor_contextmenu(obj) {
		var opt = {};
		opt.x = obj.x;
		opt.y = obj.y;
		opt.items = [];
		opt.items.push({ id: '1', name: 'Test item 1' });
		opt.items.push({ id: '2', name: 'Test item 2' });
		opt.items.push({ id: '3', name: 'Test item 3' });
		opt.items.push({ id: '4', name: 'Test item 4' });
		opt.callback = function(selected) {
			console.log(selected);
		};
		SETTER('menu/show', opt);
	}

</script>
```