j-CloudEditor

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Λειτουργεί στο iframe
Υποστήριξη πολλαπλών κούρδων (shift + cmd + arrow-down/up)
Υποστηρίζει την εύρεση επιλεγμένου κειμένου (cmd + d)
Υποστήριξη Custom Scrollbars
Υποστηρίζει το diff tracker
Υποστηρίζει ένα απλό plugin
Υποστηρίζει τη συνεργασία σε πραγματικό χρόνο
Κωδικός πηγής: https://github.com/totaljs/editor
Χρησιμοποιεί τον εκδότη: Κωδικός
Πολύ μικρός κώδικας

ΕΠΙΤΡΟΦΗ:

parent {String} ένα επιλεκτικό για το κύριο δοχείο (προεπιλεγμένο: auto)
Το autosave {Boolean} συνδέει αυτόματα την τιμή από τον εκδότη στο μονοπάτι του συστατικού (προεπιλεγμένο: true)
event {String} Ο δρόμος προς την function(name, value)
- click
- errors
- shortcut
- Το cursor περιέχει τη θέση του cursor
- change περιέχει μερικές αλλαγές για τη συνεργασία σε πραγματικό χρόνο (config.realtime πρέπει να είναι true)
contextmenu {String} Ο δρόμος προς την function(opt)
Το realtime {Boolean} επιτρέπει την αποστολή αλλαγών σε πραγματικό χρόνο στη μέθοδο event (το όνομα του γεγονότος είναι change)
keywords {String} προσαρμοσμένες λέξεις-κλειδιά στη φόρμα για παράδειγμα ID,PATH
minheight {Number} προαιρετική, ελάχιστη ύψος (προεπιλεγμένη: 0)
margin {Number} προαιρετική, κάθετη περιφέρεια (προεπιλεγμένη: 0)
NEW: url {String} προαιρετική, σύνδεση με τον εκδότη (προεπιλογή: //cdn.componentator.com/editor/1.min.html)

Μέθοδος:

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]) προσθέτει + τροποποιεί (με from) και αφαιρεί (χωρίς το επιχείρημα from)
component.change(changes) για τη συνεργασία σε πραγματικό χρόνο (changes μπορεί να δημιουργηθεί στη λειτουργία config.event)
Το component.clear() καθαρίζει όλες τις αλλαγές
component.replaceselections(selections)
component.replaceselection(selection)
component.replacerange(value, from, [to])
component.command(cmd) Εκτελέσεις codemirror.execCommand() Μέθοδος
component.exec(a, [b], [c]) Εκτελέσεις document.execCommand(a, b, c) Μέθοδος

Σημαντικό:

Τα επιχειρήματα from, to, pos πρέπει να είναι στη μορφή: { line: Number, ch: Number }.

Χρησιμοποιήστε το με <ui-component name="cloudeditor">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

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>