...
Collaboration 플러그인에서 발생하는 이벤트에 대한 리스너를 설정합니다.
parameters:
| Name | Type | Description |
|---|
| eventType | string | 이벤트 타입입니다. |
| listener | function | 이벤트 리스너입니다. |
| Code Block |
|---|
| language | js |
|---|
| theme | Emacs |
|---|
| title | 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); |
...
Collaboration 플러그인에서 발생하는 이벤트에 대한 리스너를 제거합니다.
parameters:
| Name | Type | Description |
|---|
| eventType | string | 이벤트 타입입니다. |
| listener | function | 이벤트 리스너입니다. |
| Code Block |
|---|
| language | js |
|---|
| theme | Emacs |
|---|
| title | 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); |
...
사용자의 이름을 설정합니다.
parameters:
| Name | Type | Description |
|---|
| name | string | 설정할 사용자의 이름입니다. |
| Code Block |
|---|
| language | js |
|---|
| theme | Emacs |
|---|
| title | example |
|---|
|
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
collaboration.setUserName('사용자이름'); |
...
사용자의 색상을 설정합니다.
parameters:
| Name | Type | Description |
|---|
| name | string | 설정할 사용자의 색입니다. |
| Code Block |
|---|
| language | js |
|---|
| theme | Emacs |
|---|
| title | example |
|---|
|
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
collaboration.setUserName('#39b6b8'); |
...
현재 사용자의 Client Id를 반환합니다.
returns:
| Type | Description |
|---|
| number | 현재 사용자의 Client Id 입니다. |
| Code Block |
|---|
| language | js |
|---|
| theme | Emacs |
|---|
| title | example |
|---|
|
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
var id = collaboration.getClientId(); |
...
docId 에 해당하는 문서로 실시간 협업이 시작됩니다.
parameters:
| Name | Type | Description |
|---|
| docId | string | 실시간 협업을 시작할 문서의 Id입니다. |
| Code Block |
|---|
| language | js |
|---|
| theme | Emacs |
|---|
| title | example |
|---|
|
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
collaboration.changeDocument('newDocumentId'); |
...
실시간 협업이 초기화 되는 시점에 실행될 함수를 설정합니다.
parameters:
| Name | Type | Description |
|---|
| fn | function | 실시간 협업이 초기화 되는 시점에 실행될 함수입니다. |
| Code Block |
|---|
| language | js |
|---|
| theme | Emacs |
|---|
| title | example |
|---|
|
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
collaboration.setInit(function () {
console.log('실시간 협업 연결됨');
}); |
...
getHistory()
업데이트 기록을 반환합니다.
returns:
| Type | Description |
|---|
| Object |
| Code Block |
|---|
| language | js |
|---|
| theme | Emacs |
|---|
| title | 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 정보 입니다.
|
| Code Block |
|---|
| language | js |
|---|
| theme | Emacs |
|---|
| title | example |
|---|
|
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
var history = collaboration.getHistory(); |
...
parameter로 modelJSON을 넘기지 않은 경우 에디터의 현재 모델로 업데이트 합니다. 업데이트 기록 데이터의 versions 가 초기화 됩니다.
parameters:
| Name | Type | Description |
|---|
| [modelJSON] | Object | 에디터 Body Model JSON |
| Code Block |
|---|
| language | js |
|---|
| theme | Emacs |
|---|
| title | example |
|---|
|
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
collaboration.updateHistoryOriginal(); // parameter를 넘기지 않은 경우 에디터의 현재 모델로 업데이트 |
...
액션이 아닌 경로로 에디터 편집을 한 경우 실시간 협업 모델에 동기화 되지 않는데, 이런 경우 applyChanges() 를 실행하면 에디터에 변경된 사항들을 실시간 협업 모델에 반영하게 됩니다.
액션이 아닌 경로로 편집이 일어나는 상황:
- editor.insertHTML()을 통해 HTML을 삽입했을 때
- APIModel을 이용한 편집
...
| Code Block |
|---|
| language | js |
|---|
| theme | Emacs |
|---|
| title | example |
|---|
|
var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
editor.insertHTML('SynapEditor'); // 변경된 내용이 다른 사용자들에게 동기화 되지 않음 (내 화면에서만 변경이 되어있는 상태)
collaboration.applyChanges(); // 변경된 내용이 다른 사용자들에게 동기화 됨
editor.getAPIModelById('myParagraph').replace('SynapSoft'); // 변경된 내용이 다른 사용자들에게 동기화 되지 않음 (내 화면에서만 변경이 되어있는 상태)
collaboration.applyChanges(); // 변경된 내용이 다른 사용자들에게 동기화 됨 |
Image Added