ForgeComponente
ro

Componente

j-CloudEditorSimple

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Este o alternativă simplă la j-CloudEditor. puteți specifica configurația principală în configurare, iar valoarea este {String} (în j-CloudEditor este parte a valorii de configurare).

  • Funcționează în iframe
  • Suport pentru cursori multiple (shift + cmd + arrow-down/up)
  • susține găsirea textului selectat (cmd + d)
  • Suport pentru scrollbars
  • Suport pentru dif tracker
  • Suport pentru un plugin Emmet
  • sprijină colaborarea în timp real
  • Cod de sursa: https://github.com/totaljs/editor
  • Folosește editorul: Codul Mirrorului
  • Coduri foarte mici

Configurarea:

  • parent {String} un selector pentru containerul principal (default: auto)
  • autosave {Number} reunește automat valoarea de la editor la calea componentei (în milisecunde, în mod implicit: 500)
  • event {String} este o cale spre function(name, value)
    • click
    • errors
    • shortcut
    • cursor conține poziția cursorului
    • change conține modificări parțiale pentru colaborarea în timp real (config.realtime trebuie să fie true)
  • contextmenu {String} este o cale spre function(opt)
  • realtime {Boolean} permite trimiterea în timp real a modificărilor la metoda event (numele evenimentului este change), de preferință: true
  • keywords {String} Cuvinte cheie în formă e.g. ID,PATH
  • minheight {Number} opțional, o înălțime minimă (default: 0)
  • margin {Number} opțional, o marjă verticală (default: 0)
  • linenumbers {Boolean} opțional, permite numărul de linii (default: true)
  • type {String} opțional, tip de conținut (default: clientside)
  • NEW: url {String} opțional, un link la editor (default: //cdn.componentator.com/editor/1.min.html)

Metodă:

  • 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]) adăuga + modifică (cu from) și îndepărtează (fără argumentul from)
  • component.change(changes) pentru colaborarea în timp real (changes poate fi generat în funcția config.event)
  • component.clear() clarifică toate modificările
  • component.replaceselections(selections)
  • component.replaceselection(selection)
  • component.replacerange(value, from, [to])
  • component.command(cmd) execută metoda codemirror.execCommand()
  • component.exec(a, [b], [c]) execută metoda document.execCommand(a, b, c)

Importantă:

Argumentele from, to, pos trebuie să fie în formă: { line: Number, ch: Number }.

Utilizați-l cu <ui-component name="cloudeditorsimple">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

example.html
<ui-component name="LAZY menu"></ui-component>

<div style="width:600px;height:200px;border:1px solid #E0E0E0">
	<ui-component name="cloudeditorsimple" path="editorbody" config="contextmenu:editor_contextmenu;realtime:1"></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>