j-Code

È una semplice alternativa a j-CloudEditorPuoi specificare la configurazione principale nella configurazione, e il valore è {String} (in j-CloudEditor è la configurazione parte di valore). è lo stesso componente come j-CloudEditorSimple.

• Funziona in iframe
• Supporta i multi-cursori (shift + cmd + arrow-down/up)
• Supporta la ricerca del testo selezionato (cmd + d)
• Supporto per scrollbars
• Supporto di diff tracker
• Supporta un semplice emmet plugin
• Supporta la collaborazione in tempo reale
• Codice di sorgente: https://github.com/totaljs/editor
• Utilizza l’editore: Il codice
• Il codice molto piccolo

Configurazione:

• parent {String} un selettore per il contenitore principale (default: auto)
• autosave {Number} rimbone automaticamente il valore dall'editore al percorso del componente (in millisecondi, predefinito: 500)
• event {String} un cammino verso il function(obj)
  • obj.type {String}
    • click
    • errors
    • shortcut
    • cursor contiene la posizione del cursore
    • change contiene modifiche parziali per la collaborazione in tempo reale (config.realtime deve essere true)
  • obj.instance {Editor}
• contextmenu {String} un cammino verso il function(opt)
• realtime {Boolean} consente di inviare cambiamenti in tempo reale al metodo event (nome dell'evento è change), predefinito: true
• keywords {String} Le parole chiave in forma di e.g. ID,PATH
• minheight {Number} opzionale, altezza minima (default: 0)
• margin {Number} opzionale, una margine verticale (default: 0)
• linenumbers {Boolean} opzionale, consentono i numeri di linea (default: true)
• type {String} opzionale, tipo di contenuto (default: clientside)
• url {String} opzionale, un collegamento all'editore (default: //cdn.componentator.com/editor/1.min.html)
• NEW: lint {Boolean} opzionale, permette lente (default: true)

Metodo:

• 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]) aggiunge + modifiche (con from) e rimuove (senza argomento from)
• component.change(changes) per la collaborazione in tempo reale (changes può essere generato nella funzione config.event)
• component.clear() chiarisce tutti i cambiamenti
• component.replaceselections(selections)
• component.replaceselection(selection)
• component.replacerange(value, from, [to])
• Il metodo component.command(cmd) esegue il metodo codemirror.execCommand()
• Il metodo component.exec(a, [b], [c]) esegue il metodo document.execCommand(a, b, c)
• NEW: component.setoption(name, value) invia il comando setOption al CodeMirror

Importante:

Gli argomenti from, to, pos devono essere nella forma: { line: Number, ch: Number }.

Utilizzare con <ui-component name="code">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>