목차
EVENT_TYPE
Collaboration 플러그인에서 사용할 수 있는 이벤트 타입입니다.
on(), off() 메소드를 활용해 이벤트에 대한 리스너를 설정하거나 제거할 수 있습니다.
이벤트 타입 | 설명 |
---|
ON_SYNC | - 실시간 협업이 연결되었을 때 발생합니다.
- 리스너의 parameter로 전달되는 값:
Name | Type | Description |
---|
event | Object |
{
setForceUpdate: (update: boolean) => void
} |
- setForceUpdate(update): 실시간 협업 모델을 현재 에디터에 작성된 모델로 강제로 업데이트할지 여부를 설정합니다.
|
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
var EVENT_TYPE = collaboration.EVENT_TYPE;
collaboration.on(EVENT_TYPE.ON_SYNC, function (event) {
event.setForceUpdate(true);
}); |
|
USER_CHANGED | - 접속 중인 사용자 수가 변경되었을 때 발생합니다.
- 리스너의 parameter로 전달되는 값:
Name | Type | Description |
---|
users | Object[] | 접속 중인 사용자 목록 배열입니다. [
{ id: {number}, name: {string}, color: {string}, data: {Object}, position: {Position}, modified: {number}, self: {boolean} },
....
] |
- id: 사용자의 Client Id
- name: 사용자의 이름
- color: 사용자 색
- data: 사용자 데이터
- position: 사용자의 커서 위치 정보
- modified: 마지막으로 업데이트된 시간 timestamp
- self: 사용자가 나 인지 여부
| added | number[] | 추가된 사용자의 Client Id 배열입니다. | removed | number[] | 제거된 사용자의 Client Id 배열입니다. |
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
var EVENT_TYPE = collaboration.EVENT_TYPE;
collaboration.on(EVENT_TYPE.USER_CHANGED, function (users, added, removed) {}); |
|
USER_INFO_CHANGED | - 접속 중인 사용자의 이름, 색, 커서 위치 정보가 변경되거나 사용자 수가 변경되었을 때 발생합니다.
- 리스너의 parameter로 전달되는 값:
Name | Type | Description |
---|
users | Object[] | 접속 중인 사용자 목록 배열입니다. [
{ id: {number}, name: {string}, color: {string}, data{Object}, position: {Position}, modified: {number}, self: {boolean} },
....
] |
- id: 사용자의 Client Id
- name: 사용자의 이름
- color: 사용자 색
- data: 사용자 데이터
- position: 사용자의 커서 위치 정보
- modified: 마지막으로 업데이트된 시간 timestamp
- self: 사용자가 나 인지 여부
|
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
var EVENT_TYPE = collaboration.EVENT_TYPE;
collaboration.on(EVENT_TYPE.USER_INFO_CHANGED, function (users) {}); |
|
DOCUMENT_UPDATED | - 문서에 변경사항이 생겼을 때 발생합니다.
- 리스너의 parameter로 전달되는 값:
Name | Type | Description |
---|
user | Object[] | 문서를 변경한 사용자 정보입니다. {
id: {number}, name: {string}, color: {string}, self: {boolean}
} |
- id: 사용자의 Client Id
- name: 사용자의 이름
- color: 사용자 색
- self: 사용자가 나 인지 여부
|
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
var EVENT_TYPE = collaboration.EVENT_TYPE;
collaboration.on(EVENT_TYPE.DOCUMENT_UPDATED, function (user) {}); |
|
on(eventType, listener)
Collaboration 플러그인에서 발생하는 이벤트에 대한 리스너를 설정합니다.
parameters:
Name | Type | Description |
---|
eventType | string | 이벤트 타입입니다. |
listener | function | 이벤트 리스너입니다. |
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
var EVENT_TYPE = collaboration.EVENT_TYPE;
var eventListener = function () {};
collaboration.on(EVENT_TYPE.USER_CHANGED, eventListener); |
off(eventType, listener)
Collaboration 플러그인에서 발생하는 이벤트에 대한 리스너를 제거합니다.
parameters:
Name | Type | Description |
---|
eventType | string | 이벤트 타입입니다. |
listener | function | 이벤트 리스너입니다. |
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
var EVENT_TYPE = collaboration.EVENT_TYPE;
var eventListener = function () {};
collaboration.off(EVENT_TYPE.USER_CHANGED, eventListener); |
setUserName(name)
사용자의 이름을 설정합니다.
parameters:
Name | Type | Description |
---|
name | string | 설정할 사용자의 이름입니다. |
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
collaboration.setUserName('사용자이름'); |
setUserColor(color)
사용자의 색상을 설정합니다.
parameters:
Name | Type | Description |
---|
color | string | 설정할 사용자의 색입니다. |
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
collaboration.setUserColor('#39b6b8'); |
setUserData(data)
사용자의 데이터를 기록합니다.
parameters:
Name | Type | Description |
---|
data | Object | 필요한 사용자 정보를 저장합니다. |
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
collaboration.setUserData({ userId: 'userId', connected: Date.now() }); |
getClientId()
현재 사용자의 Client Id를 반환합니다.
returns:
Type | Description |
---|
number | 현재 사용자의 Client Id 입니다. |
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
var id = collaboration.getClientId(); |
init()
실시간 협업을 초기화 합니다.
플러그인 config에 docId를 설정했다면, 설정된 docId를 기준으로 실시간 협업이 시작되고, 설정된 docId가 없다면 초기화 되지 않습니다.
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
collaboration.init(); |
changeDocument(docId)
docId 에 해당하는 문서로 실시간 협업이 시작됩니다.
parameters:
Name | Type | Description |
---|
docId | string | 실시간 협업을 시작할 문서의 Id입니다. |
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
collaboration.changeDocument('newDocumentId'); |
destroy()
현재 사용자의 실시간 협업을 종료합니다.
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
collaboration.destroy(); |
setInit(fn)
실시간 협업이 초기화 되는 시점에 실행될 함수를 설정합니다.
parameters:
Name | Type | Description |
---|
fn | function | 실시간 협업이 초기화 되는 시점에 실행될 함수입니다. |
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
collaboration.setInit(function () {
console.log('실시간 협업 연결됨');
}); |
getHistory()
업데이트 기록을 반환합니다.
returns:
Type | Description |
---|
Object |
{
original: {string},
versions: [
{ data: {string}, modified: {number}, user: { id: {number}, name: {string} } },
...
]
} |
- original: 업데이트 기록이 시작된 에디터 모델의 JSON String 입니다.
- versions: 업데이트 기록입니다. 최대 100개 까지 유지됩니다.
- data: 변경이 된 이후의 에디터 모델 JSON String 입니다.
- modified: 변경이 일어난 클라이언트 시간 timestamp 입니다.
- user: 변경을 한 사용자의 id, name 정보 입니다.
|
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
var history = collaboration.getHistory(); |
updateHistoryOriginal(modelJSON)
업데이트 기록의 원본 모델을 업데이트합니다.
parameter로 modelJSON을 넘기지 않은 경우 에디터의 현재 모델로 업데이트 합니다. 업데이트 기록 데이터의 versions 가 초기화 됩니다.
parameters:
Name | Type | Description |
---|
[modelJSON] | Object | 에디터 Body Model JSON |
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
collaboration.updateHistoryOriginal(); // parameter를 넘기지 않은 경우 에디터의 현재 모델로 업데이트 |
applyChanges()
에디터 모델에서 변경된 사항들을 실시간 협업 모델에 적용합니다.
액션이 아닌 경로로 에디터 편집을 한 경우 실시간 협업 모델에 동기화 되지 않는데, 이런 경우 applyChanges() 를 실행하면 에디터에 변경된 사항들을 실시간 협업 모델에 반영하게 됩니다.
액션이 아닌 경로로 편집이 일어나는 상황:
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
editor.insertHTML('SynapEditor'); // 변경된 내용이 다른 사용자들에게 동기화 되지 않음 (내 화면에서만 변경이 되어있는 상태)
collaboration.applyChanges(); // 변경된 내용이 다른 사용자들에게 동기화 됨
editor.getAPIModelById('myParagraph').replace('SynapSoft'); // 변경된 내용이 다른 사용자들에게 동기화 되지 않음 (내 화면에서만 변경이 되어있는 상태)
collaboration.applyChanges(); // 변경된 내용이 다른 사용자들에게 동기화 됨 |