문서 › 블록 넣기

구분선과 쪽 나누기

가로 구분선, 여섯 가지 구분선 모양, 인쇄용 쪽 나누기.

글의 흐름이 바뀌는 곳에 선을 긋거나, 인쇄할 때 다음 쪽에서 시작하게 할 때 씁니다.

직접 써 보기

이 데모의 코드

createEditor('#editor', {
  toolbar: 'bold | hr hrStyle pageBreak | undo redo',
});

구분선

hr 버튼은 커서 자리에 기본 구분선(<hr>)을 넣습니다. hrStyle 드롭다운은 모양을 골라 넣습니다. 빈 줄에서 / 를 치고 "구분선"을 골라도 됩니다.

값	이름	저장되는 스타일
`'thin'`	얇은 선	없음 (`<hr>`)
`'thick'`	굵은 선	`border-top: 3px solid #adb5bd`
`'dashed'`	파선	`border-top: 2px dashed #adb5bd`
`'dotted'`	점선	`border-top: 3px dotted #adb5bd`
`'double'`	이중 선	`border-top: 4px double #adb5bd`
`'short'`	짧은 선	`border-top: 2px solid #868e96; width: 64px; margin: 2em auto`

얇은 선을 뺀 모양은 border: 0 과 함께 인라인 스타일로 저장되므로 사이트 CSS 없이도 같은 모양입니다. 얇은 선은 브라우저나 사이트의 기본 hr 모양을 따릅니다.

pageBreak 는 인쇄하거나 PDF로 저장할 때 그 자리에서 다음 쪽으로 넘기는 표시를 넣습니다. 화면에서는 보이지 않고, 편집 중에만 점선과 "PAGE BREAK" 글자로 표시됩니다. 빈 줄에서 / 를 치고 "쪽 나누기"를 골라도 됩니다.

<div data-page-break="" style="page-break-after: always; break-after: page"></div>

editor.exec('hr');            // 기본 구분선
editor.exec('hr', 'dashed');  // thin | thick | dashed | dotted | double | short
editor.exec('pageBreak');

board 와 full 프리셋은 ⋯ 메뉴에 hrStyle 를 둡니다. pageBreak 는 full 에만 있습니다. hr 버튼은 어느 프리셋에도 없습니다.