# j-CloudEditorSimple

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

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 48d28d7160ba07748099e29681b4e02e9afbd6e174eeca0a4f13a541b22f878f
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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 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](https://codemirror.net/)
- 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(name, value)`
	- `click`
	- `errors`
	- `shortcut`
	- `cursor` contains cursor position
	- `change` contains partial changes for real-time collaboration (`config.realtime` must be `true`)
- `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`)
- __NEW__: `url {String}` optional, a link to the editor (default: `//cdn.componentator.com/editor/1.min.html`)

__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

__IMPORTANT__:

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

Use it with `<ui-component name="cloudeditorsimple">`. 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.

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