# j-CloudEditor

> j-CloudEditor: работи в iframe; поддържа много курсори (изместване + cmd + стрелката надолу/нагоре)

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

- Работи в ифрама
- Поддържа много курсори (`shift + cmd + arrow-down/up`)
- Поддържа намирането на избрания текст (`cmd + d`)
- Поддържайте персонализираните скалбарки
- Поддържа диф тракер
- Поддържа еднократно EMMET Плугин
- Подкрепа за сътрудничество в реално време
- Източен код: <https://github.com/totaljs/editor>
- Използва се редактор: [Кодекс Mirror](https://codemirror.net/)
- Много малък код

__Конфигуриране__:

- `parent {String}` - селектор за основния контейнер (предварително: `auto`)
- `autosave {Boolean}` автоматично връща стойността от редактора към маршрута на компонента (предварително: `true`)
- `event {String}` Пътят към `function(name, value)`
	- `click`
	- `errors`
	- `shortcut`
	- `cursor` съдържа позицията на курсора
	- `change` съдържа частични промени за сътрудничество в реално време (`config.realtime` трябва да бъде `true`)
- `contextmenu {String}` Пътят към `function(opt)`
- `realtime {Boolean}` позволява да се изпращат промени в реално време към метода на `event` (името на събитието е `change`)
- Късни думи на `keywords {String}` в формата, например `ID,PATH`
- `minheight {Number}` опция, минимална височина (дефолт: `0`)
- `margin {Number}` опция, вертикална маржа (дефолт: `0`)
- __NEW__: `url {String}` опция, връзка към редактора (предварително: `//cdn.componentator.com/editor/1.min.html`)

__Методът__:

- `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])` добавя + модифицира (с `from`) и премахва (без `from` аргумент) маркер
- `component.change(changes)` за сътрудничество в реално време (`changes` може да се генерира в функцията `config.event`)
- `component.clear()` разкрива всички промени
- `component.replaceselections(selections)`
- `component.replaceselection(selection)`
- `component.replacerange(value, from, [to])`
- `component.command(cmd)` изпълнява метода на `codemirror.execCommand()`
- `component.exec(a, [b], [c])` изпълнява метода на `document.execCommand(a, b, c)`

__Важен__:

`from`, `to`, `pos` аргументите трябва да бъдат в формата: `{ line: Number, ch: Number }`.

Използвайте го с `<ui-component name="cloudeditor">`Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в `DEF.fallback` (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на MIT.

```html example.html
<ui-component name="LAZY menu"></ui-component>

<div style="width:600px;height:200px;border:1px solid #E0E0E0">
	<ui-component name="cloudeditor" path="editormodel" config="contextmenu:editor_contextmenu;event:editor_event;realtime:1"></ui-component>
</div>
<br />
<div style="width:600px;height:200px;border:1px solid #E0E0E0">
	<ui-component name="cloudeditor" path="editormirrored" config="readonly:1;$id:mirrored"></ui-component>
</div>

<div class="clearfix"></div>

<script>

	var editorbody = '\n\n<h1>HELLO WORLD</h1>\n\n';
	var editormodel = { mode: 'clientside', body: editorbody, keywords: 'WORLD' };
	var editormirrored = { mode: 'clientside', body: editorbody };

	function editor_event(type, value) {
		switch (type) {
			case 'change':
				SETTER('#mirrored/change', value);
				break;
			case 'cursor':
				SETTER('#mirrored/marker', 'Peter', value.from);
				break;
		}
		SETTER('!menu/hide');
	}

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