사이냅 에디터 문서
Space shortcuts
Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

목차

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
<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);
    });
});


결과





  • No labels