j-Code

It's a simple alternative to j-CloudEditor. You can specify the main configuration in the config, and the value is {String} (in j-CloudEditor is configuration part of value). It's the same component as j-CloudEditorSimple.

• it works in the iframe
• supports multiple cursors (shift + cmd + arrow-down/up)
• supports finding selected text (cmd + d)
• supports custom scrollbars
• supports diff tracker
• supports a simple emmet plugin
• supports real-time collaboration
• source-code: https://github.com/totaljs/editor
• it uses editor: CodeMirror
• very small code

Configuration:

• parent {String} a selector for the main container (default: auto)
• autosave {Number} auto rebinds value from the editor to the component's path (in milliseconds, default: 500)
• event {String} a path to the function(obj)
  • obj.type {String}
    • click
    • errors
    • shortcut
    • cursor contains cursor position
    • change contains partial changes for real-time collaboration (config.realtime must be true)
  • obj.instance {Editor}
• contextmenu {String} a path to the function(opt)
• realtime {Boolean} enables realtime sending changes to the event method (event name is change), default: true
• keywords {String} custom keywords in the form e.g. ID,PATH
• minheight {Number} optional, a minimal height (default: 0)
• margin {Number} optional, a vertical margin (default: 0)
• linenumbers {Boolean} optional, enables line numbers (default: true)
• type {String} optional, content-type (default: clientside)
• url {String} optional, a link to the editor (default: //cdn.componentator.com/editor/1.min.html)
• NEW: lint {Boolean} optional, enables lint (default: true)

Method:

• 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]) adds + modifies (with from) and removes (without from argument) marker
• component.change(changes) for the real-time collaboration (changes can be generated in the config.event function)
• component.clear() clears all changes
• component.replaceselections(selections)
• component.replaceselection(selection)
• component.replacerange(value, from, [to])
• component.command(cmd) executes codemirror.execCommand() method
• component.exec(a, [b], [c]) executes document.execCommand(a, b, c) method
• NEW: component.setoption(name, value) sends setOption command to the CodeMirror

IMPORTANT:

from, to, pos arguments must be in the form: { line: Number, ch: Number }.

Use it with <ui-component name="code">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

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

<div style="width:600px;height:200px;border:1px solid #E0E0E0">
	<ui-component name="code" path="editorbody" config="contextmenu:editor_contextmenu"></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>