j-CloudEditor

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

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
très petit code

Configuration :

parent {String} un sélecteur pour le conteneur principal (defaut: auto)
autosave {Boolean} reflète automatiquement la valeur de l'éditeur sur le chemin du composant (defaut: true)
event {String} Un chemin vers la function(name, value)
- 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)
contextmenu {String} Un chemin vers la function(opt)
realtime {Boolean} permet d'envoyer des modifications en temps réel à la méthode event (nom de l'événement est change)
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)
NEW: url {String} facultatif, un lien vers l'éditeur (défaut: //cdn.componentator.com/editor/1.min.html)

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)

Important:

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

Utilisez-le avec <ui-component name="cloudeditor">. 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.

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>