editor

문서 › 글자와 문단

제목과 문단

본문을 제목 1~4로 바꾸는 문단 형식 메뉴와 단축키.

긴 글을 나눌 때 문단을 제목으로 바꿉니다. 제목은 <h1>~<h4> 태그로 저장되므로 검색엔진과 화면 낭독기도 글의 구조를 읽을 수 있습니다.

직접 써 보기

이 데모의 코드

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

바꾸는 방법

  • 툴바의 heading 메뉴(문단 형식)에서 본문, 제목 1, 제목 2, 제목 3, 인용 중 하나를 고릅니다. 메뉴 이름 칸에는 지금 커서가 있는 문단의 형식이 보입니다.
  • Ctrl+Alt+1~4 는 제목 1~4, Ctrl+Alt+0 은 본문입니다. 이미 같은 제목인 문단에서 다시 누르면 본문으로 돌아갑니다.
  • 빈 줄 맨 앞에서 # , ## , ### , #### 처럼 샵과 공백을 치면 바로 제목이 됩니다 (마크다운 입력).
  • 제목 맨 앞에서 Backspace 를 누르면 글자는 그대로 두고 본문으로 바뀝니다.
  • 제목 끝에서 Enter 를 치면 다음 줄은 본문으로 시작합니다.

제목 4는 메뉴에 없고 단축키와 마크다운 입력으로만 만듭니다. 여러 문단을 선택하고 바꾸면 모두 함께 바뀝니다. 목록 항목이나 표 칸 안에서도 제목을 쓸 수 있습니다.

프리셋과 휴대폰

heading 은 basic, board(기본), full 프리셋의 첫 줄에 있고 minimal 에는 없습니다. 휴대폰 툴바에서도 앞쪽에 나옵니다.

저장되는 HTML

<h2>이용 안내</h2>
<p>문단에 커서를 두고 …</p>
<h3>운영 시간</h3>

목차를 넣으면(toc) 제목에 id 가 붙습니다. 자세한 것은 책갈피와 목차를 보세요. a11y 검사는 제목 2 다음에 바로 제목 4가 오는 것처럼 단계를 건너뛴 곳을 알려 줍니다.

API

editor.exec('h2');          // 제목 2 (다시 부르면 본문)
editor.exec('paragraph');   // 본문
editor.exec('block', 'h3'); // 메뉴와 같은 명령

옵션

이름타입기본값설명
headingtoolbar item—문단 형식 메뉴: 본문, 제목 1~3, 인용
markdownShortcutsbooleantrue#  입력으로 제목 만들기. false 면 꺼집니다.