책갈피와 목차

긴 글에서 특정 위치로 바로 가는 링크를 만들 때 씁니다. 책갈피는 블록에 붙는 id 이고, 목차는 제목들의 책갈피를 모은 링크 목록입니다.

createEditor('#editor', {
  toolbar: 'heading | bold | link | anchor toc | undo redo',
});

책갈피 달기

• 책갈피를 달 블록에 커서를 두고 anchor 버튼을 누릅니다. 이름 칸에는 블록 글자로 만든 이름이 미리 들어 있습니다.
• 이름은 한글을 포함한 글자, 숫자, -, _ 만 씁니다. 공백과 기호는 - 로 바뀝니다. 같은 이름이 이미 있으면 -2, -3 이 붙습니다.
• 이름을 비우고 적용하면 책갈피가 지워집니다.
• 책갈피를 달 수 있는 블록: 제목, 문단, 목록 항목, 인용, 강조 박스, 사진(figure), 표, 접은글.
• 편집 중에는 책갈피가 있는 블록 왼쪽에 옅은 # 표시가 보입니다.

책갈피로 링크하기

• 링크 창(Ctrl+K)의 주소 칸에서 글 안의 책갈피가 #이름 으로 추천됩니다.
• 편집 중 # 링크를 Ctrl+클릭(맥은 ⌘+클릭)하면 에디터 안에서 그 위치로 스크롤합니다. 링크 막대의 "열기" 버튼도 같습니다.

목차 넣기

toc 버튼은 지금 글의 제목(H1~H4)으로 목차를 만들어 커서 자리에 넣습니다. 책갈피가 없는 제목에는 제목 글자로 책갈피를 자동으로 붙입니다. 하위 제목은 20px씩 들여씁니다. 제목이 하나도 없으면 아무것도 넣지 않습니다. 빈 줄에서 / 를 치고 "목차 넣기"를 골라도 됩니다.

저장되는 HTML

<nav data-toc=""><p><strong>목차</strong></p><ul>
  <li><a href="#설치">설치</a></li>
  <li style="margin-left: 20px"><a href="#cdn">CDN</a></li>
</ul></nav>
<h2 id="설치">설치</h2>

id는 저장할 때 걸러지지 않고 남습니다(한글 id 포함). 목차 제목 "목차"는 화면 문구 tocTitle 이라 locale 옵션으로 바꿀 수 있습니다.

createEditor('#editor', {
  locale: { tocTitle: '이 글의 차례' },
});

editor.exec('anchor'); // 책갈피 창 열기
editor.exec('toc');    // 목차 넣기

프리셋

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

옵션