j-Code

Es una alternativa sencilla a j-CloudEditor. Puede especificar la configuración principal en la configuración, y el valor es {String} (en j-CloudEditor la configuración es parte del valor). Es el mismo componente que j-CloudEditorSimple.

• funciona en el iframe
• admite múltiples cursores (shift + cmd + arrow-down/up)
• admite la búsqueda de texto seleccionado (cmd + d)
• admite barras de desplazamiento personalizadas
• soporta rastreador de diferencias
• admite un complemento emmet simple
• admite colaboración en tiempo real
• código fuente: https://github.com/totaljs/editor
• utiliza el editor: CodeMirror
• código muy pequeño

Configuración:

• parent {String} un selector para el contenedor principal (predeterminado: auto)
• autosave {Number} vuelve a vincular automáticamente el valor del editor a la ruta del componente (en milisegundos, valor predeterminado: 500)
• event {String} un camino hacia el function(obj)
  • obj.type {String}
    • click
    • errors
    • shortcut
    • cursor contiene la posición del cursor
    • change contiene cambios parciales para la colaboración en tiempo real (config.realtime debe ser true)
  • obj.instance {Editor}
• contextmenu {String} un camino hacia el function(opt)
• realtime {Boolean} permite enviar cambios en tiempo real al método event (el nombre del evento es change), predeterminado: true
• keywords {String} palabras clave personalizadas en el formulario, p. ID,PATH
• minheight {Number} opcional, una altura mínima (por defecto: 0)
• margin {Number} opcional, un margen vertical (predeterminado: 0)
• linenumbers {Boolean} opcional, habilita números de línea (predeterminado: true)
• type {String} opcional, tipo de contenido (predeterminado: clientside)
• url {String} opcional, un enlace al editor (predeterminado: //cdn.componentator.com/editor/1.min.html)
• NUEVO: lint {Boolean} opcional, habilita la pelusa (predeterminado: true)

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]) agrega + modifica (con from) y elimina (sin argumento from) el marcador
• component.change(changes) para la colaboración en tiempo real (changes se puede generar en la función config.event)
• component.clear() borra todos los cambios
• component.replaceselections(selections)
• component.replaceselection(selection)
• component.replacerange(value, from, [to])
• component.command(cmd) ejecuta el método codemirror.execCommand()
• component.exec(a, [b], [c]) ejecuta el método document.execCommand(a, b, c)
• NUEVO: component.setoption(name, value) envía el comando setOption al CodeMirror

IMPORTANTE:

Los argumentos from, to, pos deben tener el formato: { line: Number, ch: Number }.

Úselo con <ui-component name="code">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

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