커스텀 미디어 라이브러리

만약 사용자가 여러분의 서비스에 이미 업로드한 미디어 파일이 있거나, 아니면 소유하고 있는 미디어 파일을 에디터 내에서 바로 제공해주고 싶다면, 커스텀 미디어 라이브러리 기능을 이용하여 미디어 파일을 에디터 내에 표시할 수 있습니다. 커스텀 미디어 라이브러리를 추가하는 방법은 두 가지가 있습니다.

1. 데이터 기반: 기존 에디터의 라이브러리 UI를 그대로 제공하되 미디어 리스트의 내용만 바꾸는 방법
2. UI 기반: 에디터의 커스텀 라이브러리 버튼이 눌러졌을 때의 이벤트를 받아 커스텀 UI까지 제공하는 방법

커스텀 미디어 데이터 구조

데이터 기반 방식과 UI 기반 방식 모두, 다음과 같은 데이터 구조를 이용해 에디터 내에 미디어 파일을 표시하게 됩니다.

{
  "id": "string", // 미디어 파일의 고유 ID
  "title": "string", // 미디어 파일의 제목
  "thumb": "string", // 미디어 파일의 썸네일 이미지
  "url": "string" // 미디어 파일 주소
}

데이터 기반으로 연동하기

데이터 기반으로 커스텀 미디어 라이브러리를 연동하면, 별도의 UI를 제작할 필요 없이 손쉽게 에디터 내에 원하는 미디어 파일을 표시할 수 있습니다.

예시 코드

const editor = await createShakrEditor({
  ...
  // 미디어 라이브러리 연동
  media_libraries: [
    {
      id: 'sample-image',
      title: 'Sample Image Library',
      media_type: 'image', // 이미지가 있는 커스텀 미디어 라이브러리임을 명시
      custom_ui: false // 데이터 기반으로 연동할 때는 false로 지정
    }
  ]
});

editor.on('get_media', ({ search_term, page, callback }) => {
  // 사용자가 최초로 커스텀 미디어 라이브러리를 로드하거나,
  // 전체 결과 내에서 검색을 할 때 호출됨

  callback({
    // search_term이 존재하지 않는 경우 전체 배열을 반환하고,
    // search_term이 존재하는 경우, 고정된 배열 내에서 검색을 하는 예제
    media_items: search_term ? media_items.filter(media => media.title.includes(search_term)) : media_items,
    page_total: 1
  });
});

적용 예시

GitHub 저장소에서 전체 코드를 확인하거나, 레퍼런스를 확인해보세요.

UI 기반으로 연동하기

원하는 디자인으로 미디어 선택 화면을 만들고 싶거나, 리스트 화면이 아닌 새로운 형태의 화면을 보여주고 싶으시다면 UI 기반으로 연동하여 미디어 선택의 모든 부분을 직접 제작할 수 있습니다.

const editor = await createShakrEditor({
  ...
  // 미디어 라이브러리 버튼 추가
  media_libraries: [
    {
      id: 'sample-image',
      title: 'Sample Image Library',
      media_type: 'image',
      custom_ui: true // UI 기반으로 연동할 때는 true로 지정
    }
  ]
});

function openMediaLibrary() {
  // 자체적인 UI를 모달(modal) 형태로 열고 미디어 목록을 표시
  // callback을 통해 선택된 미디어 리스트 결과 반환
  ...

  callback({media_items});
}

// open_media_library 이벤트에서 실행할 함수를 지정
editor.on('open_media_library', ({ callback }) => {
    openMediaLibrary(callback);
});

적용 예시

GitHub 저장소에서 전체 코드를 확인하거나, 레퍼런스를 확인해보세요.