목차
EVENT_TYPE
Collaboration 플러그인에서 사용할 수 있는 이벤트 타입입니다.
on(), off() 메소드를 활용해 이벤트에 대한 리스너를 설정하거나 제거할 수 있습니다.
이벤트 타입 | 설명 | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ON_SYNC |
example 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 |
example 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 |
example 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) {}); |
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 | example { original: {string}, versions: [ { data: {string}, modified: {number}, user: { id: {number}, name: {string} } }, ... ] }
|
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() 를 실행하면 에디터에 변경된 사항들을 실시간 협업 모델에 반영하게 됩니다.
액션이 아닌 경로로 편집이 일어나는 상황:
- editor.insertHTML()을 통해 HTML을 삽입했을 때
- APIModel을 이용한 편집
var editor = new SynapEditor(id, synapEditorConfig); var collaboration = editor.plugins.collaboration; editor.insertHTML('SynapEditor'); // 변경된 내용이 다른 사용자들에게 동기화 되지 않음 (내 화면에서만 변경이 되어있는 상태) collaboration.applyChanges(); // 변경된 내용이 다른 사용자들에게 동기화 됨 editor.getAPIModelById('myParagraph').replace('SynapSoft'); // 변경된 내용이 다른 사용자들에게 동기화 되지 않음 (내 화면에서만 변경이 되어있는 상태) collaboration.applyChanges(); // 변경된 내용이 다른 사용자들에게 동기화 됨