j-Code

Je to jednoduchá alternatíva k j-CloudEditor. V konfigurácii môžete zadať hlavnú konfiguráciu a jej hodnota je {String} (v j-CloudEditor je súčasťou hodnoty konfigurácia). Je to rovnaký komponent ako j-CloudEditorSimple.

• funguje to v iframe
• podporuje viacero kurzorov (shift + cmd + arrow-down/up)
• podporuje nájdenie vybraného textu (cmd + d)
• podporuje vlastné posuvníky
• podporuje sledovanie rozdielov
• podporuje jednoduchý emmet plugin
• podporuje spoluprácu v reálnom čase
• zdrojový kód: https://github.com/totaljs/editor
• používa editor: CodeMirror
• veľmi malý kód

Konfigurácia:

• parent {String} volič pre hlavný kontajner (predvolené: auto)
• autosave {Number} automaticky previaže hodnotu z editora na cestu komponentu (v milisekundách, predvolená hodnota: 500)
• event {String} cesta k function(obj)
  • obj.type {String}
    • click
    • errors
    • shortcut
    • cursor obsahuje polohu kurzora
    • change obsahuje čiastočné zmeny pre spoluprácu v reálnom čase (config.realtime musí byť true)
  • obj.instance {Editor}
• contextmenu {String} cesta k function(opt)
• realtime {Boolean} umožňuje odosielanie zmien v reálnom čase metódou event (názov udalosti je change), predvolené: true
• keywords {String} vlastné kľúčové slová v tvare napr. ID,PATH
• minheight {Number} voliteľné, minimálna výška (predvolené: 0)
• margin {Number} voliteľné, zvislý okraj (predvolené: 0)
• linenumbers {Boolean} voliteľné, umožňuje čísla riadkov (predvolené: true)
• type {String} voliteľné, typ obsahu (predvolené: clientside)
• url {String} voliteľné, odkaz na editor (predvolené: //cdn.componentator.com/editor/1.min.html)
• NEW: lint {Boolean} voliteľné, povolí lint (predvolené: true)

Metóda:

• 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]) pridáva + upravuje (so from) a odstraňuje (bez argumentu from) značku
• component.change(changes) pre spoluprácu v reálnom čase (changes je možné vygenerovať vo funkcii config.event)
• component.clear() vymaže všetky zmeny
• component.replaceselections(selections)
• component.replaceselection(selection)
• component.replacerange(value, from, [to])
• component.command(cmd) vykoná metódu codemirror.execCommand()
• component.exec(a, [b], [c]) vykoná metódu document.execCommand(a, b, c)
• NEW: component.setoption(name, value) odošle príkaz setOption do CodeMirror

DÔLEŽITÉ:

Argumenty from, to, pos musia byť v tvare: { line: Number, ch: Number }.

Použite ho so <ui-component name="code">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia 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>