@convergencelabs/monaco-collab-ext

摩纳哥合作展

增强 摩纳哥编辑器 并增加了在系统中对远程用户所做的事情进行提示的能力.

安装

安装国家防范机制包并将其添加到您的发展依赖中:

npm install --save-dev @convergencelabs/monaco-collab-ext

演示

走开 这里 可以看到多个光标、多个选择和远程滚动条的活演示(在多个浏览器上查看,甚至更好,也指向朋友)。 这个用 趋同 处理数据同步和用户动作.

使用量

远程浏览器管理器

远程ursor Manager 允许您轻松渲染其他用户的光标 在同一文档中工作。 光标位置可显示为 单线性指数或作为二维位置,形式为 {lineNumber: 0, column: 10}。 。 。 .

const editor = monaco.editor.create(document.getElementById("editor"), {
  value: "function helloWorld = () => { console.log('hello world!')",
  theme: "vs-dark'",
  language: 'javascript'
});

const remoteCursorManager = new MonacoCollabExt.RemoteCursorManager({
  editor: editor,
  tooltips: true,
  tooltipDuration: 2
});

const cursor = remoteCursorManager.addCursor("jDoe", "blue", "John Doe");

// Set the position of the cursor.
cursor.setOffset(4);

// Hide the cursor
cursor.hide();

// Show the cursor
cursor.show();

// Remove the cursor.
cursor.dispose();

远程选择 经理

远程选择管理器允许您轻松地对其它选项进行选择 在同一文档中工作的用户.

const editor = monaco.editor.create(document.getElementById("editor"), {
  value: "function helloWorld = () => { console.log('hello world!')",
  theme: "vs-dark'",
  language: 'javascript'
});

const remoteSelectionManager = new MonacoCollabExt.RemoteSelectionManager({editor: editor});

const selection = remoteSelectionManager.addSelection("jDoe", "blue");

// Set the range of the selection using zero-based offsets.
selection.setOffsets(45, 55);

// Hide the selection
selection.hide();

// Show the selection
selection.show();

// Remove the selection.
selection.dispose();

编辑器控制器

编辑器 ContentManager 简化处理本地和远程变化 给编辑.

const editor = monaco.editor.create(document.getElementById("editor"), {
  value: "function helloWorld = () => { console.log('hello world!')",
  theme: "vs-dark'",
  language: 'javascript'
});

const contentManager = new MonacoCollabExt.EditorContentManager({
  editor: editor,
  onInsert(index, text) {
    console.log("Insert", index, text);
  },
  onReplace(index, length, text) {
    console.log("Replace", index, length, text);
  },
  onDelete(index, length) {
    console.log("Delete", index, length);
  }
});

// Insert text into the editor at offset 5.
contentManager.insert(5, "some text");

// Replace the text in the editor at range 5 - 10.
contentManager.replace(5, 10, "some text");

// Delete the text in the editor at range 5 - 10.
contentManager.delete(5, 10);

// Release resources when done
contentManager.dispose();