j-CloudEditor

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Det fungerar i iframe
Stöd för flera kursorer (shift + cmd + arrow-down/up)
Stöd för att hitta valt text (cmd + d)
Stöd för custom scrollbars
Stöd för diff tracker
Stöd för en enkel emmet plugin
Stöd för realtidssamarbete
Källkod: https://github.com/totaljs/editor
Den använder redaktören: CodeMirror
Mycket liten kod

Konfigurera:

parent {String} en selektor för huvudkontakten (default: auto)
autosave {Boolean} automatiskt binder värdet från redaktören till komponenten (default: true)
event {String} en väg till function(name, value)
- click
- errors
- shortcut
- cursor innehåller cursorposition
- change innehåller partiella förändringar för verkligt samarbete (config.realtime måste vara true)
contextmenu {String} en väg till function(opt)
realtime {Boolean} gör det möjligt att skicka ändringar i realtid till metoden event (eventnamn är change)
keywords {String} anpassade nyckelord i form t.ex. ID,PATH
minheight {Number} valfritt, en minimal höjd (default: 0)
margin {Number} valfritt, en vertikal marginal (default: 0)
NEW: url {String} valfritt, en länk till redaktören (default: //cdn.componentator.com/editor/1.min.html)

Metoden:

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]) lägger till + modifierar (med from) och tar bort (utan from-argument) markör
component.change(changes) för samarbete i realtid (changes kan genereras i config.event-funktionen)
component.clear() klarar alla förändringar
component.replaceselections(selections)
component.replaceselection(selection)
component.replacerange(value, from, [to])
component.command(cmd) utför codemirror.execCommand() metod
component.exec(a, [b], [c]) utför document.execCommand(a, b, c) metod

Viktigt:

from, to, pos argument måste vara i form: { line: Number, ch: Number }.

Använd den med <ui-component name="cloudeditor">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

example.html

<ui-component name="LAZY menu"></ui-component>

<div style="width:600px;height:200px;border:1px solid #E0E0E0">
	<ui-component name="cloudeditor" path="editormodel" config="contextmenu:editor_contextmenu;event:editor_event;realtime:1"></ui-component>
</div>
<br />
<div style="width:600px;height:200px;border:1px solid #E0E0E0">
	<ui-component name="cloudeditor" path="editormirrored" config="readonly:1;$id:mirrored"></ui-component>
</div>

<div class="clearfix"></div>

<script>

	var editorbody = '\n\n<h1>HELLO WORLD</h1>\n\n';
	var editormodel = { mode: 'clientside', body: editorbody, keywords: 'WORLD' };
	var editormirrored = { mode: 'clientside', body: editorbody };

	function editor_event(type, value) {
		switch (type) {
			case 'change':
				SETTER('#mirrored/change', value);
				break;
			case 'cursor':
				SETTER('#mirrored/marker', 'Peter', value.from);
				break;
		}
		SETTER('!menu/hide');
	}

	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>