...

• 공식적으로 지원하는 웹 브라우저는 다음과 같습니다.
  • Microsoft Edge 최신버전
  • Google Chrome 최신버전
  • Apple Safari 최신버전
  • Mozilla Firefox 최신버전
• 다른 브라우저에서도 작동할 수는 있지만 모든 기능이 올바르게 작동하지 않을 수 있습니다.
• Internet Explorer 브라우저는 지원하지 않습니다.

...

<!-- SynapEditor 객체가 존재해야 적용할 수 있기 때문에 에디터 스크립트 파일 아래에 include 해야 합니다 -->

<script src="collaboration.min.js의 url"></script>

<!-- 접속 사용자 정보 기본 제공 UI, 업데이트 기록 보기 다이얼로그를 사용하는 경우 CSS 파일을 include 해야 합니다 -->
<link rel="stylesheet" href="collaboration.min.css의 url">

...

//...
'collaboration.config': { 
    'wsUrl': 'ws://websocket_url:1234'
}
// ...

실시간 협업 문서 Id 설정 (선택)

실시간 협업을 시작할 문서의 Id를 설정합니다.

//...
'collaboration.config': { 
    'docId': 'documentId'
}
// ...

사용자 이름, 커서 색, 데이터 설정 (선택)

사용자의 이름과 커서의 색, 데이터(특정 정보)를 설정할 수 있습니다.

...

사용자 이미지 설정 (선택)

userData에 사용자 이미지 Url을 설정하면 기본으로 제공되는 접속 사용자 UI에 이미지를 표시할 수 있습니다.

//...
'collaboration.config': { 
    'userName': '사이냅',
    'userColor': '#39B6B8',
    'userData': {
		'profileImage': '/img/path.png' // 사용자 이미지 Url
	}
}
// ...

기본 이름, 기본 색 설정 (선택)

사용자 이름과 색을 설정을 하지 않았을 때 보여질 기본 이름 목록과 기본 색 목록을 설정할 수 있습니다.

...

실시간 협업 시작/종료 하기

플러그인 API를 사용하여 실시간 협업을 시작하거나 종료할 수 있습니다.

• 실시간 협업 시작: init(), changeDocument(docId)
• 실시간 협업 종료: destroy()

자세한 내용 보기: [Collaboration] 플러그인 API

init()을 사용하여 실시간 협업 시작하기 

config 에 설정된 docId로 실시간 협업을 시작(초기화)합니다. 설정된 docId가 없다면 실시간 협업이 시작되지 않습니다.

var synapEditorConfig = {
    ...
    'collaboration.config': { 
        'wsUrl': 'ws://websocket_url:1234',
        'docId': 'documentId' // 실시간 협업을 시작할 문서 Id
    },
    ...
}

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

changeDocument(docId)를 사용하여 실시간 협업 시작하기 

docId로 실시간 협업을 시작합니다.

var synapEditorConfig = {
    ...
    'collaboration.config': { 
        'wsUrl': 'ws://websocket_url:1234'
    },
    ...
}

var editor = new SynapEditor(id, synapEditorConfig);
var collaboration = editor.plugins.collaboration;
 
collaboration.changeDocument('documentId'); // 실시간 협업을 시작할 문서 Id

destroy()를 사용하여 실시간 협업 종료하기

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

var collaboration = editor.plugins.collaboration;
 
collaboration.destroy();

접속 사용자 정보 보기

기본 제공 UI

실시간 협업에 참여 중인 사용자 정보를 표시하는 UI가 기본으로 제공됩니다. 툴바에 버튼 형태로 추가 할 수 있습니다.

...