목록

항목을 나열할 때 글머리 기호 목록이나 번호 목록을 씁니다. listStyle 메뉴로 번호를 가. 나. 다. 나 i. ii. iii. 로 바꿀 수 있습니다.

createEditor('#editor', {
  toolbar: 'bulletList orderedList listStyle | indent outdent',
});

만들기

• bulletList(글머리 기호) Ctrl+Shift+8, orderedList(번호 매기기) Ctrl+Shift+7. 다시 누르면 목록이 풀립니다.
• 빈 줄 맨 앞에서 - , * , + 를 치면 글머리 목록, 1. 이나 1) 을 치면 번호 목록이 됩니다.
• Tab 은 항목을 한 단계 안으로, Shift+Tab 은 밖으로 뺍니다. indent / outdent 버튼도 같습니다.
• 빈 항목에서 Enter 를 누르면 목록이 끝나고 본문으로 돌아갑니다.

목록 모양 (listStyle)

메뉴에서 고르는 모양: ● disc, ○ circle, ■ square, 1. 2. 3., 01. 02., a. b. c., A. B. C., i. ii. iii., I. II. III., 가. 나. 다., ㄱ. ㄴ. ㄷ. 글머리 목록에서 번호 모양을 고르면 번호 목록으로, 번호 목록에서 기호 모양을 고르면 글머리 목록으로 바뀝니다. 목록 밖에서 고르면 그 모양으로 새 목록을 만듭니다.

listMenu 는 글머리 기호, 번호, 체크리스트를 한 버튼의 메뉴로 묶은 것입니다. 툴바가 좁을 때 쓰세요.

프리셋과 휴대폰

• bulletList orderedList: minimal, basic, board, full 모두 첫 줄
• listStyle: full 의 ⋯ 더 보기 안에만 있습니다.
• 휴대폰 툴바 첫 줄에는 글머리 기호가 있고 번호 목록은 ⋯ 안에 있습니다.

저장되는 HTML

기본 모양(disc, 1. 2. 3.)은 style 없이, 다른 모양은 list-style-type 으로 저장됩니다. 보기 화면의 CSS가 목록의 list-style 을 지우고 있다면 모양이 안 보일 수 있습니다.

<ul>
  <li>신분증</li>
  <li>증명사진
    <ul><li>3×4 cm</li></ul>
  </li>
</ul>
<ol style="list-style-type: hangul">
  <li>신청서 작성</li>
</ol>

API

editor.exec('bulletList');
editor.exec('listStyle', 'lower-alpha');

옵션

할 일 목록은 체크리스트를 보세요.