목차

1. 플러그인에 이벤트 걸기

에디터가 초기화 된 이후 에디터를 통해 플러그인 객체에 접근할 수 있습니다.

플러그인 객체를 통해 사용자 정보가 변할 때 발생하는 이벤트 'userChanged'에 이벤트 리스너를 추가합니다.

var editor = new SynapEditor(id, synapEditorConfig); // 사이냅 에디터 초기화
var collaboration = editor.plugins.collaboration; // 실시간 협업 플러그인 객체 접근
var 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 배열
});


2. 이벤트 리스너에 UI 로직 작성

사용자 정보가 변할 때 발생하는 이벤트 리스너에 사용자 목록 UI를 구성하는 로직을 작성합니다.

<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, function (users, added, removed) {
    var collaboUserElement = document.getElementById('collabo-user-list');
    collaboUserElement.innerHTML = '';
    users.forEach((user) => {
        var 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);
    });
});


결과