실시간 공동 편집

3.0.0 버전부터 지원합니다.

여러 사용자가 동시에 동일한 문서를 편집할 수 있도록 합니다.

1.00

하위 페이지

지원되는 브라우저

크롬엣지사파리IE
크롬엣지사파리IE
SupportedSupportedSupportedNot supported
  • Microsoft Edge (최신)
  • Google Chrome (최신)
  • Apple Safari (최신)
  • 다른 브라우저에서도 동작할 수 있으나 모든 기능이 보장되지는 않습니다.
  • Internet Explorer는 지원되지 않습니다.

설정

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

<!-- CSS needed if you use the default user-info UI or the update-history dialog -->
<link rel="stylesheet" href="url of collaboration.min.css">

구성

WebSocket URL (필수)

wsUrl이 없으면 플러그인이 초기화되지 않습니다.

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

문서 ID (선택 사항)

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

사용자 이름, 커서 색상, 사용자 데이터 (선택 사항)

지정하지 않으면 형용사 10개와 동물 10개를 조합한 무작위 이름과, 기본 색상 10개 중 무작위 색상이 사용됩니다.

'collaboration.config': {
  'userName':  'SynapEditor',
  'userColor': '#39B6B8',
  'userData': {
    'userId':    'userId',     // your DB user id
    'connected': Date.now()    // arbitrary data
  }
}
userName, userColor 미설정userName, userColor 설정됨
무작위 이름 및 색상설정된 이름 및 색상

사용자 프로필 이미지 (선택 사항)

3.2.2507 버전부터 지원합니다.

'collaboration.config': {
  'userName':  'Synap',
  'userColor': '#39B6B8',
  'userData': {
    'profileImage': '/img/path.png'
  }
}
변경 전변경 후
Without profile imageWith profile image

기본 이름/색상 목록 (선택 사항)

userName / userColor가 설정되지 않은 경우, 이 배열에 지정한 값 중에서 무작위로 선택됩니다.

'collaboration.config': {
  'defaultNames':  ['Puppy', 'Cat', 'Sparrow'],
  'defaultColors': ['#CDB4DB', '#F5CAC3', '#87BBA2']
}
defaultNames, defaultColors 미설정defaultNames, defaultColors 설정됨
내장된 랜덤 이름과 색상설정된 풀에서 가져온 이름과 색상

공동 편집 시작 / 종료

공동 편집을 시작(init(), changeDocument(docId))하거나 종료(destroy())하는 플러그인 API입니다. 플러그인 API를 참고합니다.

init()로 시작하기

구성에서 docId를 사용합니다. docId가 비어 있으면, 초기화는 아무 작업도 하지 않습니다.

// synapeditor.config.js
var synapEditorConfig = {
  // ...
  'collaboration.config': {
    'wsUrl': 'ws://websocket_url:1234',
    'docId': 'documentId'
  }
};

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

changeDocument(docId)로 시작하기

설정에서 docId를 지정하지 않고 사용합니다.

editor.plugins.collaboration.changeDocument('documentId');

destroy()로 종료

editor.plugins.collaboration.destroy();

활성 사용자 UI

내장 UI

현재 연결된 사용자를 표시하는 툴바 버튼을 추가합니다. 사용자를 클릭하면 해당 사용자의 캐럿 위치로 이동합니다.

1.00

1.00

editor.toolbar 설정에 'collaborator'를 추가합니다.

1.00

'editor.toolbar': [
  /* ... */ 'collaborator' /* ... */
]

사용자 정의 UI

사용자 정의 사용자 정보 UI 가이드를 참고합니다.

1.00

업데이트 내역

공동 편집 세션 중 최대 100개의 최근 편집 이벤트를 표시하며, 복원이 가능합니다. 아무도 연결되어 있지 않으면 업데이트 내역이 초기화됩니다.

1.00

editor.toolbar 설정에 'updateHistory'를 추가하여 다이얼로그를 여는 버튼을 추가합니다.

1.00

'editor.toolbar': [
  /* ... */ 'updateHistory' /* ... */
]

하위 문서