단 나누기

사진과 설명, 장점과 단점처럼 두세 덩어리를 나란히 보여 줄 때 씁니다. 화면이 좁으면 미디어 쿼리 없이도 단이 아래로 쌓입니다.

createEditor('#editor', {
  toolbar: 'heading | bold | bulletList | columns | undo redo',
});

쓰는 법

• columns 메뉴에서 2단 또는 3단을 고르면, 커서가 있는 문단(골랐으면 고른 문단들)이 첫 단에 들어가고 나머지 단은 빈 줄로 생깁니다.
• 단 안에 커서를 두면 오른쪽 위에 막대가 뜹니다. 2단 · 3단으로 바꾸거나 "단 없애기"로 풀 수 있습니다.
• 3단을 2단으로 줄이면 사라지는 단의 내용은 남는 마지막 단 뒤에 붙습니다. 단을 없애면 내용이 차례대로 이어지고, 손대지 않은 빈 줄은 지워집니다.
• 편집 중에는 단마다 점선 테두리가 보입니다. 저장 HTML에는 없습니다.

휴대폰에서

단마다 flex: 1 1 240px 가 들어가 있어 한 단이 240px보다 좁아질 화면에서는 단이 줄바꿈되어 아래로 쌓입니다. 사이트 CSS를 고칠 필요가 없습니다.

저장되는 HTML

<div data-columns="2" style="display: flex; flex-wrap: wrap; gap: 24px; margin: 0.8em 0">
  <div data-column="" style="flex: 1 1 240px; min-width: 0"><h3>좋은 점</h3>…</div>
  <div data-column="" style="flex: 1 1 240px; min-width: 0"><h3>아쉬운 점</h3>…</div>
</div>

editor.exec('columns', '3');  // 3단으로 (단 밖이면 새로 만들기)
editor.exec('columns', '');   // 단 없애기

프리셋

board 와 full 프리셋의 ⋯ 메뉴에 있습니다.

옵션