# j-Code

> C'est une alternative simple à j-CloudEditor. Vous pouvez spécifier la configuration principale dans la configuration et la valeur est {String} (dans j-CloudEditor, la configuration fait partie de la valeur). C'est le même composant qu'un

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

C’est une simple alternative à `j-CloudEditor`Vous pouvez spécifier la configuration principale dans le config, et la valeur `{String}` (en `j-CloudEditor` est la configuration de la valeur).C'est le même composant que `j-CloudEditorSimple`.

- Il fonctionne dans l'IFRAM
- prend en charge plusieurs curseurs (`shift + cmd + arrow-down/up`)
- prend en charge la recherche du texte sélectionné (`cmd + d`)
- prend en charge les barres de défilement personnalisées
- Le diff tracker
- Un simple emmet plugin
- Soutenir la collaboration en temps réel
- Code de source : https://github.com/totaljs/editor
- Il utilise l’éditeur : [CodeMireau](https://codemirror.net/)
- très petit code

__Configuration__ :

- `parent {String}` un sélecteur pour le conteneur principal (defaut: `auto`)
- `autosave {Number}` reflète automatiquement la valeur de l'éditeur sur le chemin du composant (en milliseconds, par défaut: `500`)
- `event {String}` Un chemin vers la `function(obj)`
	- `obj.type {String}`
		- `click`
		- `errors`
		- `shortcut`
		- `cursor` Contient la position du cursor
		- `change` contient des changements partiels pour la collaboration en temps réel (`config.realtime` doit être `true`)
	- `obj.instance {Editor}`
- `contextmenu {String}` Un chemin vers la `function(opt)`
- `realtime {Boolean}` permet l'envoi en temps réel de modifications à la méthode `event` (nom d'événement est `change`), par défaut: `true`
- `keywords {String}` Les mots-clés dans la forme d’e.g. `ID,PATH`
- `minheight {Number}` optionnel, une hauteur minimale (defaut: `0`)
- `margin {Number}` en option, une marge verticale (par défaut : `0`)
- `linenumbers {Boolean}` optionnel, permet des numéros de ligne (defaut: `true`)
- `type {String}` optionnel, type de contenu (defaut: `clientside`)
- `url {String}` optionnel, un lien vers l'éditeur (défaut: `//cdn.componentator.com/editor/1.min.html`)
- __NEW__: `lint {Boolean}` facultatif, permet la lente (défaut: `true`)

__Méthode__ :

- `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])` ajoute + modifie (avec `from`) et supprime (sans argent `from`)
- `component.change(changes)` pour la collaboration en temps réel (`changes` peut être généré dans la fonction `config.event`)
- `component.clear()` efface toutes les modifications
- `component.replaceselections(selections)`
- `component.replaceselection(selection)`
- `component.replacerange(value, from, [to])`
- `component.command(cmd)` exécute la méthode `codemirror.execCommand()`
- `component.exec(a, [b], [c])` exécute la méthode `document.execCommand(a, b, c)`
- __NEW__: `component.setoption(name, value)` envoie la commande `setOption` au CodeMirror

__Important__:

Les arguments `from`, `to`, `pos` doivent être sous la forme : `{ line: Number, ch: Number }`.

Utilisez-le avec `<ui-component name="code">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

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