[공동 편집] 플러그인 API

목차

• EVENT_TYPE
• on(eventType, listener)
  • 매개변수
• off(eventType, listener)
  • 매개변수
• setUserName(name)
  • 매개변수
• setUserColor(color)
  • 매개변수
• setUserData(data)
  • 매개변수
• getClientId()
  • 반환값
• init()
• changeDocument(docId)
  • 매개변수
• destroy()
• setInit(fn)
  • 매개변수
• getHistory()
  • 반환값
• updateHistoryOriginal(modelJSON)
  • 매개변수
• applyChanges()

EVENT_TYPE

공동 편집 플러그인에서 사용할 수 있는 이벤트 타입은 다음과 같습니다.

on() 및 off() 메서드를 사용하여 이벤트에 대한 리스너를 등록하거나 제거할 수 있습니다.

ON_SYNC

• 실시간 공동 편집 세션이 연결될 때 발생합니다.
• 리스너 매개변수로 전달되는 값:

ON_SYNC event

{
    setForceUpdate: (update: boolean) => void
}

• setForceUpdate(update): true로 설정하면 공동 편집 모델이 에디터의 현재 모델로 강제로 덮어써집니다.

예시

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

• 연결된 사용자 수가 변경될 때 발생합니다.
• 리스너 매개변수로 전달되는 값:

USER_CHANGED users

현재 연결된 사용자 목록입니다.

{
    id:       number,    // client ID
    name:     string,
    color:    string,
    data:     Object,
    position: Position,
    modified: number,    // last update timestamp
    self:     boolean
}

예시

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) {
    console.log(users, added, removed);
});

USER_INFO_CHANGED

• 연결된 사용자의 이름, 색상 또는 커서 위치가 변경될 때 발생합니다. 또한 사용자 수가 변경될 때도 실행됩니다.
• 리스너 매개변수로 전달되는 값:

예시

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) {
    console.log(users);
});

DOCUMENT_UPDATED

3.0.2404 버전부터 지원합니다.

• 문서가 변경될 때 발생합니다.
• 리스너 매개변수로 전달되는 값:

DOCUMENT_UPDATED user

변경을 수행한 사용자입니다.

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

예시

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) {
    console.log(user);
});

on(eventType, listener)

공동 편집 플러그인에서 발생하는 이벤트에 대한 리스너를 등록합니다.

매개변수

예시

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)

공동 편집 플러그인에서 발생하는 이벤트에 대한 리스너를 제거합니다.

매개변수

예시

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)

현재 사용자의 이름을 설정합니다.

매개변수

예시

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

collaboration.setUserName('user-name');

setUserColor(color)

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

매개변수

예시

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

collaboration.setUserColor('#39b6b8');

setUserData(data)

현재 사용자의 임의 정보를 저장합니다.

매개변수

예시

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

collaboration.setUserData({ userId: 'userId', connected: Date.now() });

getClientId()

현재 사용자의 클라이언트 ID를 반환합니다.

반환값

예시

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

var id = collaboration.getClientId();

init()

공동 편집을 초기화합니다.

플러그인 구성에서 docId가 설정되어 있으면 세션이 해당 문서로 시작됩니다. docId가 없으면 이 메서드는 아무 작업도 하지 않습니다.

예시

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

collaboration.init();

changeDocument(docId)

다른 문서로 전환합니다.

매개변수

예시

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)

세션이 초기화될 때 실행할 콜백 함수를 설정합니다.

매개변수

예시

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

collaboration.setInit(function () {
    console.log('Collaboration connected');
});

getHistory()

업데이트 내역을 반환합니다.

반환값

릴리즈 3.0.x까지:

{
    original: string,       // JSON string of the editor model when history started
    versions: [
        {
            data:     string,   // JSON string of the editor model after the change
            modified: number,   // client timestamp
            user:     { id: number, name: string }
        }
        // ... up to 100 entries
    ]
}

3.1.0 버전부터 지원:

[
    {
        modified:     number,
        rootModified: boolean,    // whether the document's root (body) was modified
        snapshot:     Uint8Array, // model snapshot after the change
        user:         { id: number, name: string, color: string }
    }
    // ...
]

예시

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

var history = collaboration.getHistory();

updateHistoryOriginal(modelJSON)

사용 중단됨 (3.1.0 버전부터).

업데이트 내역의 "original" 모델을 업데이트합니다. modelJSON 없이 호출하면 에디터의 현재 모델을 사용합니다. versions는 초기화됩니다.

매개변수

예시

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

collaboration.updateHistoryOriginal();

applyChanges()

액션 시스템을 거치지 않은 에디터 측 변경 사항을 공동 편집 모델로 푸시하여, 다른 클라이언트에서도 이를 볼 수 있도록 합니다.

다음과 같은 경우에 필요합니다:

• editor.insertHTML(...) 이후
• APIModel을 통한 편집 이후

예시

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

editor.insertHTML('SynapEditor');                                  // local only
collaboration.applyChanges();                                       // sync

editor.getAPIModelById('myParagraph').replace('SynapSoft');         // local only
collaboration.applyChanges();                                       // sync