j-CloudEditorSimple

Es ist eine einfache Alternative zu j-CloudEditor. Sie können die Hauptkonfiguration in der Konfiguration angeben, und der Wert ist {String} (in j-CloudEditor ist die Konfiguration Teil des Wertes).

• Es funktioniert im IFRAM
• unterstützt mehrere Cursor (shift + cmd + arrow-down/up)
• unterstützt die Suche nach ausgewähltem Text (cmd + d)
• Unterstützt benutzerdefinierte Bildlaufleisten
• Unterstützt die Diff Tracker
• Unterstützung eines einfachen Emmet Plugins
• Unterstützt die Zusammenarbeit in Echtzeit
• Quellcode: https://github.com/totaljs/editor
• Es verwendet Editor: Der CodeMirror
• Sehr klein Code

Konfiguration:

• parent {String} ein Selektor für den Hauptcontainer (Default: auto)
• autosave {Number} Auto verbindet den Wert vom Editor auf den Weg des Komponenten (in Millisekunden, Standard: 500)
• event {String} ist der Weg zum function(name, value)
  • click
  • errors
  • shortcut
  • cursor enthält Cursorposition
  • change enthält teilweise Änderungen für die Zusammenarbeit in Echtzeit (config.realtime muss true)
• contextmenu {String} ist der Weg zum function(opt)
• realtime {Boolean} erlaubt, Änderungen in Echtzeit an die Methode event zu senden (Event Name ist change), Standard: true
• keywords {String}-Schlüsselwörter im Formular zum Beispiel ID,PATH
• minheight {Number} optionale, eine Mindesthöhe (Default: 0)
• margin {Number} optional, ein vertikaler Rand (Standard: 0)
• linenumbers {Boolean} optionale, erlaubt lineare Zahlen (Default: true)
• type {String} optionale, Inhaltstyp (Default: clientside)
• NEW: url {String} optionale, eine Verbindung zum Editor (Default: //cdn.componentator.com/editor/1.min.html)

Methode:

• 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]) fügt + modifiziert (mit from) und entfernt (ohne from Argument)
• component.change(changes) für die Zusammenarbeit in Echtzeit (changes kann in der Funktion config.event erzeugt werden)
• component.clear() klärt alle Veränderungen
• component.replaceselections(selections)
• component.replaceselection(selection)
• component.replacerange(value, from, [to])
• component.command(cmd) führt die Methode codemirror.execCommand() aus
• component.exec(a, [b], [c]) führt die Methode document.execCommand(a, b, c) aus

WICHTIG:

from, to, pos Argumente müssen in der Form sein: { line: Number, ch: Number }.

Verwenden Sie es mit <ui-component name="cloudeditorsimple">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

<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>