EVENT_TYPE

Collaboration 플러그인에서 사용할 수 있는 이벤트 타입입니다.

on(), off() 메소드를 활용해 이벤트에 대한 리스너를 설정하거나 제거할 수 있습니다.

이벤트 타입

설명

ON_SYNC

실시간 협업이 연결되었을 때 발생합니다.
리스너의 parameter로 전달되는 값:

Name	Type	Description
event	Object	{ setForceUpdate: (update: boolean) => void } setForceUpdate(update): 실시간 협업 모델을 현재 에디터에 작성된 모델로 강제로 업데이트할지 여부를 설정합니다.

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

접속 중인 사용자 수가 변경되었을 때 발생합니다.
리스너의 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 배열입니다.

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

접속 중인 사용자의 이름, 색, 커서 위치 정보가 변경되거나 사용자 수가 변경되었을 때 발생합니다.
리스너의 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: 사용자가 나 인지 여부

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) {});

DOCUMENT_UPDATED

릴리즈 3.0.2404 이상

문서에 변경사항이 생겼을 때 발생합니다.
리스너의 parameter로 전달되는 값:

Name

Type

Description

user

Object[]

문서를 변경한 사용자 정보입니다.

{ 
    id: {number}, name: {string}, color: {string}, self: {boolean} 
}

id: 사용자의 Client Id
name: 사용자의 이름
color: 사용자 색
self: 사용자가 나 인지 여부

example

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	이벤트 리스너입니다.

example

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	이벤트 리스너입니다.

example

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	설정할 사용자의 이름입니다.

example

var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;

collaboration.setUserName('사용자이름');

setUserColor(color)

사용자의 색상을 설정합니다.

parameters:

Name	Type	Description
color	string	설정할 사용자의 색입니다.

example

var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;

collaboration.setUserColor('#39b6b8');

setUserData(data)

사용자의 데이터를 기록합니다.

parameters:

Name	Type	Description
data	Object	필요한 사용자 정보를 저장합니다.

example

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 입니다.

example

var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;

var id = collaboration.getClientId();

init()

실시간 협업을 초기화 합니다.

플러그인 config에 docId를 설정했다면, 설정된 docId를 기준으로 실시간 협업이 시작되고, 설정된 docId가 없다면 초기화 되지 않습니다.

example

var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;

collaboration.init();

changeDocument(docId)

docId 에 해당하는 문서로 실시간 협업이 시작됩니다.

parameters:

Name	Type	Description
docId	string	실시간 협업을 시작할 문서의 Id입니다.

example

var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;

collaboration.changeDocument('newDocumentId');

destroy()

현재 사용자의 실시간 협업을 종료합니다.

example

var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;

collaboration.destroy();

setInit(fn)

실시간 협업이 초기화 되는 시점에 실행될 함수를 설정합니다.

parameters:

Name	Type	Description
fn	function	실시간 협업이 초기화 되는 시점에 실행될 함수입니다.

example

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} } },
        ...
    ]
}

original: 업데이트 기록이 시작된 에디터 모델의 JSON String 입니다.
versions: 업데이트 기록입니다. 최대 100개 까지 유지됩니다.
- data: 변경이 된 이후의 에디터 모델 JSON String 입니다.
- modified: 변경이 일어난 클라이언트 시간 timestamp 입니다.
- user: 변경을 한 사용자의 id, name 정보 입니다.

example

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

example

var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;

collaboration.updateHistoryOriginal(); // parameter를 넘기지 않은 경우 에디터의 현재 모델로 업데이트

applyChanges()

에디터 모델에서 변경된 사항들을 실시간 협업 모델에 적용합니다.

액션이 아닌 경로로 에디터 편집을 한 경우 실시간 협업 모델에 동기화 되지 않는데, 이런 경우 applyChanges() 를 실행하면 에디터에 변경된 사항들을 실시간 협업 모델에 반영하게 됩니다.

액션이 아닌 경로로 편집이 일어나는 상황:

editor.insertHTML()을 통해 HTML을 삽입했을 때
APIModel을 이용한 편집

example

var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;

editor.insertHTML('SynapEditor');   // 변경된 내용이 다른 사용자들에게 동기화 되지 않음 (내 화면에서만 변경이 되어있는 상태)
collaboration.applyChanges();       // 변경된 내용이 다른 사용자들에게 동기화 됨

editor.getAPIModelById('myParagraph').replace('SynapSoft');   // 변경된 내용이 다른 사용자들에게 동기화 되지 않음 (내 화면에서만 변경이 되어있는 상태)
collaboration.applyChanges();       // 변경된 내용이 다른 사용자들에게 동기화 됨

Space shortcuts

Page tree

목차

EVENT_TYPE

on(eventType, listener)

parameters:

off(eventType, listener)

parameters:

setUserName(name)

parameters:

setUserColor(color)

parameters:

setUserData(data)

parameters:

getClientId()

returns:

init()

changeDocument(docId)

parameters:

destroy()

setInit(fn)

parameters:

getHistory()

returns:

updateHistoryOriginal(modelJSON)

parameters:

applyChanges()

Space shortcuts

Page tree

[Collaboration] 플러그인 API

목차

EVENT_TYPE

on(eventType, listener)

parameters:

off(eventType, listener)

parameters:

setUserName(name)

parameters:

setUserColor(color)

parameters:

setUserData(data)

parameters:

getClientId()

returns:

init()

changeDocument(docId)

parameters:

destroy()

setInit(fn)

parameters:

getHistory()

returns:

updateHistoryOriginal(modelJSON)

parameters:

applyChanges()