j-Code

Het is een eenvoudige alternatief voor j-CloudEditorU kunt de belangrijkste configuratie in de config specificeren, en de waarde is {String} (in de j-CloudEditor is de configuratie deel van de waarde). het is dezelfde component als j-CloudEditorSimple.

• Het werkt in de iframe
• Ondersteunt meerdere cursoren (shift + cmd + arrow-down/up)
• ondersteunt het vinden van geselecteerde tekst (cmd + d)
• Ondersteunt custom scrollbars
• Ondersteunt de diff tracker
• Ondersteunt een eenvoudige emmet plugin
• Ondersteunt realtime samenwerking
• Broncode: https://github.com/totaljs/editor
• Het maakt gebruik van de redactie: CodeMirror
• Zeer kleine code

Configuratie:

• parent {String} een selector voor de hoofdcontainers (default: auto)
• De autosave {Number} auto bindt de waarde van de editor naar de route van de component (in milliseconden, standaard: 500)
• event {String} een weg naar de function(obj)
  • obj.type {String}
    • click
    • errors
    • shortcut
    • cursor bevat cursorpositie
    • change bevat gedeeltelijke wijzigingen voor realtime samenwerking (config.realtime moet true)
  • obj.instance {Editor}
• contextmenu {String} een weg naar de function(opt)
• realtime {Boolean} maakt het mogelijk om in realtime wijzigingen te sturen naar de event methode (eventnaam is change), standaard: true
• keywords {String} aangepaste sleutelwoorden in het formulier bijvoorbeeld ID,PATH
• minheight {Number} optioneel, een minimale hoogte (default: 0)
• margin {Number} optioneel, een verticale marge (default: 0)
• linenumbers {Boolean} optioneel, mogelijk lijn getallen (default: true)
• type {String} optioneel, inhoudstype (default: clientside)
• url {String} optioneel, een link naar de editor (default: //cdn.componentator.com/editor/1.min.html)
• NEW: lint {Boolean} optioneel, mogelijk lint (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]) voegt + wijzigingen toe (met from) en verwijdert (geen argument from) markering
• component.change(changes) voor realtime samenwerking (changes kan worden gegenereerd in de config.event-functie)
• component.clear() verwijdert alle veranderingen
• component.replaceselections(selections)
• component.replaceselection(selection)
• component.replacerange(value, from, [to])
• component.command(cmd) uitvoert de methode codemirror.execCommand()
• component.exec(a, [b], [c]) uitvoert de methode document.execCommand(a, b, c)
• NEW: component.setoption(name, value) stuurt de bestelling setOption naar de CodeMirror

Belangrijk:

De argumenten van from, to, pos moeten in de vorm zijn: { line: Number, ch: Number }.

Gebruik het met <ui-component name="code">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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