# j-CloudEditorSimple

> Ez egy egyszerű alternatíva a j-CloudEditor. Megadhatja a fő konfigurációt a konfigurációban, és az érték {String} (a j-CloudEditor a konfigurációs része az érték).

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

Ez egy egyszerű alternatíva a `j-CloudEditor`. Megadhatja a fő konfigurációt a konfigurációban, és az érték `{String}` (a `j-CloudEditor` a konfigurációs része az érték).

- Az IFRAM-ban működik
- Többszörös kurzorok támogatása (`shift + cmd + arrow-down/up`)
- támogatja a kiválasztott szöveg megtalálását (`cmd + d`)
- Támogatja a custom scrollbars
- Támogatja a diff tracker
- Egy egyszerű emmet plugin támogatása
- Valós idejű együttműködés támogatása
- forráskód: <https://github.com/totaljs/editor>
- A szerkesztő használja: [CodeMirror](https://codemirror.net/)
- Nagyon kicsi kód

__konfiguráció__:

- `parent {String}` a fő tartály kiválasztója (default: `auto`)
- A `autosave {Number}` automatikusan visszahívja az értékeket a szerkesztőről a komponens útjára (millió másodpercben, alapértelmezett: `500`)
- A `event {String}` az út a `function(name, value)` felé
	- `click`
	- `errors`
	- `shortcut`
	- A `cursor` tartalmazza a kurzor pozíciót
	- A `change` részleges változásokat tartalmaz a valós idejű együttműködéshez (`config.realtime` kell `true`)
- A `contextmenu {String}` az út a `function(opt)` felé
- A `realtime {Boolean}` lehetővé teszi a `event` módszer valós idejű módosítását (az esemény neve `change`), alapértelmezett: `true`
- `keywords {String}` személyre szabott kulcsszavak, például a `ID,PATH`
- `minheight {Number}` opcionális, minimális magasság (default: `0`)
- `margin {Number}` opcionális, egy függőleges margin (default: `0`)
- `linenumbers {Boolean}` opcionális, lehetővé teszi a sorszámok (default: `true`)
- `type {String}` opcionális, tartalmi típus (default: `clientside`)
- __NEW__: `url {String}` opcionális, a szerkesztőhöz való hivatkozás (default: `//cdn.componentator.com/editor/1.min.html`)

__módszer__:

- `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])` hozzáadja + módosítja (a `from`-vel) és eltávolítja a jelölést (nem `from` érv)
- `component.change(changes)` Valós idejű együttműködés (`changes` A termelés a `config.event` funkciók
- A `component.clear()` megtisztítja az összes változást
- `component.replaceselections(selections)`
- `component.replaceselection(selection)`
- `component.replacerange(value, from, [to])`
- `component.command(cmd)` végrehajtás `codemirror.execCommand()` módszer
- `component.exec(a, [b], [c])` végrehajtás `document.execCommand(a, b, c)` módszer

__Fontos__:

`from`, `to`, `pos` Az érveknek a formában kell lenniük: `{ line: Number, ch: Number }`.

Használja a `<ui-component name="cloudeditorsimple">`Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről `DEF.fallback` (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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