ForgeComponents
el

Components

j-CloudEditorSimple

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

Είναι μια απλή εναλλακτική λύση στο j-CloudEditor. Μπορείτε να καθορίσετε την κύρια διαμόρφωση στην επιλογή, και η τιμή είναι {String} (στο j-CloudEditor είναι μέρος της αξίας διαμόσχευσης).

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

ΕΠΙΤΡΟΦΗ:

  • parent {String} ένα επιλεκτικό για το κύριο δοχείο (προεπιλεγμένο: auto)
  • Το autosave {Number} ανασυνδέει αυτόματα την τιμή από τον εκδότη στο μονοπάτι του συστατικού (σε δισεκατομμύρια δευτερόλεπτα, προεπιλογή: 500)
  • event {String} Ο δρόμος προς την function(name, value)
    • click
    • errors
    • shortcut
    • Το cursor περιέχει τη θέση του cursor
    • change περιέχει μερικές αλλαγές για τη συνεργασία σε πραγματικό χρόνο (config.realtime πρέπει να είναι true)
  • contextmenu {String} Ο δρόμος προς την function(opt)
  • Το realtime {Boolean} επιτρέπει την αποστολή αλλαγών σε πραγματικό χρόνο στη μέθοδο event (το όνομα του γεγονότος είναι change), προεπιλογή: true
  • keywords {String} προσαρμοσμένες λέξεις-κλειδιά στη φόρμα για παράδειγμα ID,PATH
  • minheight {Number} προαιρετική, ελάχιστη ύψος (προεπιλεγμένη: 0)
  • margin {Number} προαιρετική, κάθετη περιφέρεια (προεπιλεγμένη: 0)
  • linenumbers {Boolean} προαιρετικά, επιτρέπει αριθμούς γραμμής (προεπιλεγμένα: true)
  • type {String} Εναλλακτική, τύπος περιεχομένου (επιλογή: clientside)
  • 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="cloudeditorsimple">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, 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="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>