j-CloudEditorSimple

É uma alternativa simples para j-CloudEditorVocê pode especificar a configuração principal no config, e o valor é {String} ( em j-CloudEditor É uma parte do valor da configuração).

• Trabalha no iframe
• Suporte a múltiplos cursores (shift + cmd + arrow-down/up)
• Suporte para encontrar texto selecionado (cmd + d)
• Suporte para scrollbars
• Suporte para o DIF Tracker
• Suporte a um plugin emmet
• Apoia a colaboração em tempo real
• Código de origem: https://github.com/totaljs/editor
• Ele usa o editor: Código Mirror
• Código muito pequeno

Configuração:

• parent {String} um seletor para o recipiente principal (default: auto)
• autosave {Number} automaticamente liga o valor do editor para o caminho do componente (em milisecundos, padrão: 500)
• event {String} - um caminho para o function(name, value)
  • click
  • errors
  • shortcut
  • cursor contém posição de cursor
  • change contém alterações parciais para colaboração em tempo real (config.realtime deve ser true)
• contextmenu {String} - um caminho para o function(opt)
• realtime {Boolean} permite o envio de alterações em tempo real ao método event (nome do evento é change), padrão: true
• keywords {String} Palavras-chave na forma de e.g. ID,PATH
• minheight {Number} opcional, uma altura mínima (default: 0)
• margin {Number} opcional, uma margem vertical (default: 0)
• linenumbers {Boolean} opcional, permite números de linha (default: true)
• type {String} opcional, tipo de conteúdo (default: clientside)
• NEW: url {String} opcional, um link para o editor (default: //cdn.componentator.com/editor/1.min.html)

Método:

• 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]) adiciona + modificações (com from) e remove (sem argumento from) marcador
• component.change(changes) para a colaboração em tempo real (changes pode ser gerado na função config.event)
• component.clear() clarifica todas as mudanças
• component.replaceselections(selections)
• component.replaceselection(selection)
• component.replacerange(value, from, [to])
• component.command(cmd) executa o método codemirror.execCommand()
• component.exec(a, [b], [c]) executa o método document.execCommand(a, b, c)

Importante:

Os argumentos from, to, pos devem ser na forma: { line: Number, ch: Number }.

Use-o com <ui-component name="cloudeditorsimple">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença MIT.

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