Ace 协作扩展
增强 Ace 编辑器 并增加了在系统中对远程用户所做的事情进行提示的能力.
安装
安装国家防范机制包并将其添加到您的发展依赖中:
0.5.0版本(当前):
npm install --save-dev @convergencelabs/ace-collab-ext
0.4.0版本(先前为):
npm install --save-dev @convergence/ace-collab-ext
演示
走开 这里 可以看到多个光标、多个选择和远程滚动条的活演示(在多个浏览器上查看,甚至更好,也指向朋友)。 这个用 趋同 处理数据同步和用户动作.
使用量
支助科
请确定包含一个位于节点模块的 Css 目录中的 CSS 文件 :
css/ace-collab-ext.csscss/ace-collab-ext.min.css
如何做到这一点将取决于您如何包装和分发您的应用程序。 例如,如果您正在捆绑您的 css / sass / 少一点,您可能可以使用 @import 声明或您可能 require 这个 如果你是热联系, 你可能需要在一个 <link> 标记到文档中.
如果您忘记包含样式, 它有可能是远程光标 / 选择不会出现, 或者它们不会正确移动 .
多光标管理器
多光标管理器允许您轻松渲染其他用户的光标
在同一文档中工作。 光标位置可显示为
单线性指数或作为二维位置,形式为
{row: 0, column: 10}。 。 。 .
const editor = ace.edit("editor");
const curMgr = new AceCollabExt.AceMultiCursorManager(editor.getSession());
// Add a new remote cursor with an id of "uid1", and a color of orange.
curMgr.addCursor("uid1", "User 1", "orange", {row: 0, column: 10});
// Set cursor for "uid1" to index 10.
curMgr.setCursor("uid1", 10);
// Clear the remote cursor for "uid1" without removing it.
curMgr.clearCursor("uid1");
// Remove the remote cursor for "uid1".
curMgr.removeCursor("uid1");
多选择管理器
多选择管理器允许您轻松选择其它 在同一文档中工作的用户。 选择由一组 相克兰. 普通选择的单一范围很常见, 但多个范围 用于支持块选择.
const AceRange = ace.require("ace/range");
const editor = ace.edit("editor");
const selMgr = new AceCollabExt.AceMultiSelectionManager(editor.getSession());
// A two-line block selection
const initialRanges = [
new AceRange(0, 0, 0, 10),
new AceRange(1, 0, 1, 10),
];
// Add a new remote view indicator with an id of "uid1", and a color of orange.
selMgr.addSelection("uid1", "User 1", "orange", initialRanges);
// Set the selection to a new range.
selMgr.setSelection("uid1", new AceRange(10, 0, 11, 10));
// Nullify the selection without removing the marker.
selMgr.clearSelection("uid1");
// Remove the remote view indicator for "uid1".
selMgr.removeSelection("uid1");
雷达视图
雷达视图显示文档中另一个用户正在查找和允许何处 您可以轻松地访问文档中的位置.
const editor = ace.edit("editor");
const radarView = new AceCollabExt.RadarView("radarView", editor);
// Add a new remote view indicator with an id of "uid1", and a color of orange.
radarView.addView("uid1", "user1", "orange", 0, 20, 0);
// Set the viewport range of the indicator to span rows 10 through 40.
radarView.setViewRows("uid1", 10, 40);
// Set the row location of the cursor to line 10.
radarView.setCursorRow("uid1", 10);
// Remove the remote view indicator for "uid1".
radarView.removeView("uid1");