사진 목록과 정리

사진이 많은 글에서 에디터 아래에 사진 목록을 띄웁니다. 긴 글에서 사진을 찾아가거나 순서를 바꾸고, 지웠던 사진을 되살릴 때 씁니다. 같은 정보로 서버에 남은 쓸모없는 업로드도 정리할 수 있습니다.

createEditor('#editor', {
  toolbar: 'image | undo redo',
  imageTray: true,
  height: 300,
  // 데모: 고른 사진 대신 예시 사진 주소를 돌려줍니다
  uploadImage: async (file) => 'https://picsum.photos/seed/' + Date.now() + '/640/420',
});

사진 목록 (imageTray)

imageTray: true 를 주면 에디터 아래, 상태 표시줄 위에 글 안 사진의 작은 그림이 순서대로 놓입니다. 사진이 없으면 숨습니다.

• 작은 그림을 누르면 본문의 그 사진으로 스크롤하고 사진을 선택합니다.
• 작은 그림을 끌어 다른 자리에 놓으면 본문 안 사진 순서가 바뀝니다. 캡션이 있는 사진이나 링크가 걸린 사진은 그 상자째 움직입니다.
• ✕ 를 누르면 본문에서 그 사진을 지웁니다.
• 이 편집 중에 올렸다가 본문에서 빠진 사진은 흐리게 + 로 남습니다. 누르면 커서 자리에 다시 들어갑니다.

서버에 남은 업로드 정리

사진을 올린 뒤 지우거나 바꾸면 서버에는 파일이 남습니다. 저장할 때 아래 두 메서드로 정리하세요.

• editor.getImages(): 지금 본문에 있는 사진 주소 목록 (중복 없음). 올리는 중인 사진과 blob:·data: 주소는 빠집니다.
• editor.getUnusedUploads(): 이 에디터가 열려 있는 동안 uploadImage·uploadUrl 로 올린 주소 가운데 지금 본문에 없는 것.

form.addEventListener('submit', async () => {
  const unused = editor.getUnusedUploads();
  if (unused.length) {
    await fetch('/upload/cleanup', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ urls: unused }),
    });
  }
});

image:remove 이벤트는 본문에서 사진이 빠질 때마다(지우기, 잘라내기, 바꾸기) { src } 로 알려 줍니다. 다만 되돌리기로 다시 돌아올 수 있으니, 서버 파일은 이 이벤트가 아니라 저장할 때 getUnusedUploads() 로 지우세요.

editor.on('image:remove', ({ src }) => console.log('빠진 사진', src));

옵션