사진 묶음

사진 여러 장을 나란히 놓거나 옆으로 넘겨 보게 묶습니다. 후기, 상품 사진, 여행 글처럼 사진이 많은 글에서 씁니다.

createEditor('#editor', {
  toolbar: 'image gallery | undo redo',
  height: 420,
  uploadImage: async (file) => URL.createObjectURL(file),
});

만드는 방법

툴바의 사진 묶음(gallery)에서 모양을 고릅니다.

• 커서가 있는 문단에 사진이 두 장 이상 있으면 그 사진들을 한 묶음으로 만듭니다. 링크가 걸린 사진은 사진만 들어갑니다.
• 그렇지 않으면 파일 고르기 창이 열리고, 고른 사진들이 새 묶음으로 들어갑니다. 빈 문단이면 그 자리를, 아니면 그 문단 다음에 놓입니다.

묶음 막대

묶음 안의 사진을 누르면 묶음 위에 막대가 뜹니다: 2열 / 3열 / 슬라이드 바꾸기, 대체 텍스트, 사진 더하기(묶음 끝에 붙음), 이미지 삭제, 묶음 풀기(사진들을 한 문단으로 되돌림). 마지막 사진을 지우면 묶음도 없어집니다.

툴바에서의 위치

gallery 는 board 와 full 프리셋의 ⋯ 더보기 메뉴에 있습니다. 필요하면 toolbar 에 직접 적으세요.

저장되는 HTML

<div data-gallery="2" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0.8em 0">
  <img src="/files/a.jpg" alt="" style="width: 100%; aspect-ratio: 4 / 3; object-fit: cover">
  <img src="/files/b.jpg" alt="" style="width: 100%; aspect-ratio: 4 / 3; object-fit: cover">
</div>
<div data-gallery="slide" style="display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0.8em 0">…</div>

격자와 슬라이드 모두 인라인 CSS 라서, 보기 화면에 스크립트나 에디터 CSS 가 없어도 같은 모양이고 휴대폰에서는 손가락으로 넘겨 볼 수 있습니다.

코드에서는 editor.exec('gallery', '3') 처럼 부릅니다. 묶음 안에서 'add' 는 사진 더하기, '' 는 묶음 풀기입니다.

옵션