# j-Code

> Es ist eine einfache Alternative zu j-CloudEditor. Sie können die Hauptkonfiguration in der Konfiguration angeben, und der Wert ist {String} (in j-CloudEditor ist die Konfigurierung Teil des Wertes).

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

Es ist eine einfache Alternative zu `j-CloudEditor`Sie können die Hauptkonfiguration in der Konfiguration angeben, und der Wert ist `{String}` (In der `j-CloudEditor` ist eine Konfiguration Teil des Wertes). Es ist die gleiche Komponente wie `j-CloudEditorSimple`.

- Es funktioniert im IFRAM
- unterstützt mehrere Cursor (`shift + cmd + arrow-down/up`)
- unterstützt die Suche nach ausgewähltem Text (`cmd + d`)
- Unterstützt benutzerdefinierte Bildlaufleisten
- Unterstützt die Diff Tracker
- Unterstützung eines einfachen Emmet Plugins
- Unterstützt die Zusammenarbeit in Echtzeit
- Quellcode: <https://github.com/totaljs/editor>
- Es verwendet Editor: [Der CodeMirror](https://codemirror.net/)
- Sehr klein Code

__Konfiguration__:

- `parent {String}` ein Selektor für den Hauptcontainer (Default: `auto`)
- `autosave {Number}` Auto verbindet den Wert vom Editor auf den Weg des Komponenten (in Millisekunden, Standard: `500`)
- `event {String}` ist der Weg zum `function(obj)`
	- `obj.type {String}`
		- `click`
		- `errors`
		- `shortcut`
		- `cursor` enthält Cursorposition
		- `change` enthält teilweise Änderungen für die Zusammenarbeit in Echtzeit (`config.realtime` muss `true`)
	- `obj.instance {Editor}`
- `contextmenu {String}` ist der Weg zum `function(opt)`
- `realtime {Boolean}` erlaubt, Änderungen in Echtzeit an die Methode `event` zu senden (Event Name ist `change`), Standard: `true`
- `keywords {String}`-Schlüsselwörter im Formular zum Beispiel `ID,PATH`
- `minheight {Number}` optionale, eine Mindesthöhe (Default: `0`)
- `margin {Number}` optional, ein vertikaler Rand (Standard: `0`)
- `linenumbers {Boolean}` optionale, erlaubt lineare Zahlen (Default: `true`)
- `type {String}` optionale, Inhaltstyp (Default: `clientside`)
- `url {String}` optional, ein Link zum Editor (Standard: `//cdn.componentator.com/editor/1.min.html`)
- __NEW__: `lint {Boolean}` optionale, ermöglicht Linte (Default: `true`)

__Methode__:

- `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])` fügt + modifiziert (mit `from`) und entfernt (ohne `from` Argument)
- `component.change(changes)` für die Zusammenarbeit in Echtzeit (`changes` kann in der Funktion `config.event` erzeugt werden)
- `component.clear()` klärt alle Veränderungen
- `component.replaceselections(selections)`
- `component.replaceselection(selection)`
- `component.replacerange(value, from, [to])`
- `component.command(cmd)` führt die Methode `codemirror.execCommand()` aus
- `component.exec(a, [b], [c])` führt die Methode `document.execCommand(a, b, c)` aus
- __NEW__: `component.setoption(name, value)` sendet die `setOption`-Kommand an den CodeMirror

__WICHTIG__:

`from`, `to`, `pos` Argumente müssen in der Form sein: `{ line: Number, ch: Number }`.

Verwenden Sie es mit `<ui-component name="code">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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

<div style="width:600px;height:200px;border:1px solid #E0E0E0">
	<ui-component name="code" path="editorbody" config="contextmenu:editor_contextmenu"></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>
```