...
Code Block | ||||
---|---|---|---|---|
| ||||
varconst editor = new SynapEditor(id, synapEditorConfig); // 사이냅 에디터 초기화 varconst collaboration = editor.plugins.collaboration; // 실시간 협업 플러그인 객체 접근 varconst EVENT_TYPE = collaboration.EVENT_TYPE; // 이벤트 타입 (ON_SYNC, USER_CHANGED, USER_INFO_CHANGED) collaboration.on(EVENT_TYPE.USER_CHANGED, function (users, added, removed) => { // 사용자 수가 변할 때 실행할 내용 // users: 총 접속 중인 사용자 정보 // added: 추가된 사용자 id 배열 // removed: 제거된 사용자 id 배열 }); |
...
Code Block | ||||
---|---|---|---|---|
| ||||
collaboration.on(EVENT_TYPE.USER_CHANGED, function (users, added, removed) => { varconst collaboUserElement = document.getElementById('collabo-user-list'); collaboUserElement.innerHTML = ''; users.forEach((user) => { varconst userHTML = `<div id="collabo-user-${user.id}" class="collabo-user ${user.self ? 'collabo-self' : ''}"> <span class="collabo-color" style="background-color: ${user.color}"></span> <span class="collabo-name">${user.name}</span> </div>`; collaboUserElement.insertAdjacentHTML('beforeend', userHTML); }); }); |
...