ForgeKomponensek
hu

Komponensek

j-CloudEditorSimple

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Ez egy egyszerű alternatíva a j-CloudEditor. Megadhatja a fő konfigurációt a konfigurációban, és az érték {String} (a j-CloudEditor a konfigurációs része az érték).

  • Az IFRAM-ban működik
  • Többszörös kurzorok támogatása (shift + cmd + arrow-down/up)
  • támogatja a kiválasztott szöveg megtalálását (cmd + d)
  • Támogatja a custom scrollbars
  • Támogatja a diff tracker
  • Egy egyszerű emmet plugin támogatása
  • Valós idejű együttműködés támogatása
  • forráskód: https://github.com/totaljs/editor
  • A szerkesztő használja: CodeMirror
  • Nagyon kicsi kód

konfiguráció:

  • parent {String} a fő tartály kiválasztója (default: auto)
  • A autosave {Number} automatikusan visszahívja az értékeket a szerkesztőről a komponens útjára (millió másodpercben, alapértelmezett: 500)
  • A event {String} az út a function(name, value) felé
    • click
    • errors
    • shortcut
    • A cursor tartalmazza a kurzor pozíciót
    • A change részleges változásokat tartalmaz a valós idejű együttműködéshez (config.realtime kell true)
  • A contextmenu {String} az út a function(opt) felé
  • A realtime {Boolean} lehetővé teszi a event módszer valós idejű módosítását (az esemény neve change), alapértelmezett: true
  • keywords {String} személyre szabott kulcsszavak, például a ID,PATH
  • minheight {Number} opcionális, minimális magasság (default: 0)
  • margin {Number} opcionális, egy függőleges margin (default: 0)
  • linenumbers {Boolean} opcionális, lehetővé teszi a sorszámok (default: true)
  • type {String} opcionális, tartalmi típus (default: clientside)
  • NEW: url {String} opcionális, a szerkesztőhöz való hivatkozás (default: //cdn.componentator.com/editor/1.min.html)

módszer:

  • 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]) hozzáadja + módosítja (a from-vel) és eltávolítja a jelölést (nem from érv)
  • component.change(changes) Valós idejű együttműködés (changes A termelés a config.event funkciók
  • A component.clear() megtisztítja az összes változást
  • component.replaceselections(selections)
  • component.replaceselection(selection)
  • component.replacerange(value, from, [to])
  • component.command(cmd) végrehajtás codemirror.execCommand() módszer
  • component.exec(a, [b], [c]) végrehajtás document.execCommand(a, b, c) módszer

Fontos:

from, to, pos Az érveknek a formában kell lenniük: { line: Number, ch: Number }.

Használja a <ui-component name="cloudeditorsimple">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>