목차
1. 플러그인에 이벤트 걸기
에디터가 초기화 된 이후 에디터를 통해 실시간 협업 플러그인 객체에 접근할 수 있습니다.
실시간 협업 플러그인 객체를 통해 사용자 정보가 변할 때 발생하는 이벤트 'userChanged'에 이벤트 리스너를 추가합니다.
const editor = new SynapEditor(id, synapEditorConfig); // 사이냅 에디터 초기화 const collaboration = editor.plugins.collaboration; // 실시간 협업 플러그인 객체 접근 const EVENT_TYPE = collaboration.EVENT_TYPE; // 이벤트 타입 (ON_SYNC, USER_CHANGED, USER_INFO_CHANGED) collaboration.on(EVENT_TYPE.USER_CHANGED, (users, added, removed) => { // 사용자 수가 변할 때 실행할 내용 // users: 총 접속 중인 사용자 정보 // added: 추가된 사용자 id 배열 // removed: 제거된 사용자 id 배열 });
2. 이벤트 리스너에 UI 로직 작성
사용자 정보가 변할 때 발생하는 이벤트 리스너에 사용자 목록 UI를 구성하는 로직을 작성합니다.
html
<html> <style> #collabo-user-list { padding: 5px; } #collabo-user-list .collabo-user { display: inline-block; margin-right: 5px; color: #3c3c3c; padding: 2px 5px; border-radius: 8px; } #collabo-user-list .collabo-self { background-color: #f4f4f4; } #collabo-user-list .collabo-color { width: 12px; height: 12px; display: inline-block; border-radius: 4px; vertical-align: middle; } #collabo-user-list .collabo-name { display: inline-block; font-size: 12px; } </style> <body> <div id="collabo-user-list"></div> <!-- 사용자 목록을 보여줄 Element --> <div id="synapeditor"></div> <!-- SynapEditor 가 초기화될 Element --> </body> </html>
collaboration.on(EVENT_TYPE.USER_CHANGED, (users, added, removed) => { const collaboUserElement = document.getElementById('collabo-user-list'); collaboUserElement.innerHTML = ''; users.forEach((user) => { const 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); }); });