j-Code

C’est une simple alternative à j-CloudEditorVous 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
• 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.

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