ForgeКомпоненти
bg

Компоненти

j-CloudEditorSimple

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Това е проста алтернатива на j-CloudEditorМожете да определите основната конфигурация в конфигурата, а стойността е {String} в j-CloudEditor Конфигурацията е част от стойността.

  • Работи в ифрама
  • Поддържа много курсори (shift + cmd + arrow-down/up)
  • Поддържа намирането на избрания текст (cmd + d)
  • Поддържайте персонализираните скалбарки
  • Поддържа диф тракер
  • Поддържа еднократно EMMET Плугин
  • Подкрепа за сътрудничество в реално време
  • Източен код: https://github.com/totaljs/editor
  • Използва се редактор: Кодекс Mirror
  • Много малък код

Конфигуриране:

  • parent {String} - селектор за основния контейнер (предварително: auto)
  • autosave {Number} автоматично връща стойността от редактора към пътя на компонента (в милисекунди, по подразбиране: 500)
  • event {String} Пътят към function(name, value)
    • click
    • errors
    • shortcut
    • cursor съдържа позицията на курсора
    • change съдържа частични промени за сътрудничество в реално време (config.realtime трябва да бъде true)
  • contextmenu {String} Пътят към function(opt)
  • realtime {Boolean} позволява да се изпращат промени в реално време към метода на event (името на събитието е change), по подразбиране: true
  • Късни думи на keywords {String} в формата, например ID,PATH
  • minheight {Number} опция, минимална височина (дефолт: 0)
  • margin {Number} опция, вертикална маржа (дефолт: 0)
  • linenumbers {Boolean} опционално, позволява линейни номера (дефолт: true)
  • type {String} опционален, съдържателен тип (дефолт: clientside)
  • NEW: url {String} опция, връзка към редактора (предварително: //cdn.componentator.com/editor/1.min.html)

Методът:

  • 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]) добавя + модифицира (с from) и премахва (без from аргумент) маркер
  • component.change(changes) за сътрудничество в реално време (changes може да се генерира в функцията config.event)
  • component.clear() разкрива всички промени
  • component.replaceselections(selections)
  • component.replaceselection(selection)
  • component.replacerange(value, from, [to])
  • component.command(cmd) изпълнява метода на codemirror.execCommand()
  • component.exec(a, [b], [c]) изпълнява метода на document.execCommand(a, b, c)

Важен:

from, to, pos аргументите трябва да бъдат в формата: { line: Number, ch: Number }.

Използвайте го с <ui-component name="cloudeditorsimple">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на MIT.

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>