접은글

정답, 스포일러, 긴 부연 설명처럼 원하는 사람만 펼쳐 보게 할 내용에 씁니다. HTML 표준 <details> 로 저장되므로 스크립트 없이 어느 페이지에서나 접히고 펼쳐집니다.

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

쓰는 법

• 빈 줄에서 details 버튼을 누르면 접은글이 들어가고 제목 "더보기"가 골라진 상태가 됩니다. 바로 쳐서 제목을 바꾸면 됩니다.
• 여러 문단을 고르고 누르면 그 문단들이 접은글 안으로 들어갑니다.
• 접은글 안에서 다시 누르면 접은글이 풀립니다. 제목은 문단이 되고 내용은 그대로 남습니다. 제목 맨 앞에서 Backspace 를 눌러도 풀립니다.
• 빈 줄에서 / 를 치고 "접은글"(또는 더보기, 스포일러)을 골라도 됩니다.

편집 중에는 늘 펼쳐져 있습니다

쓰는 동안 내용이 숨으면 고치기 어려우므로, 편집 화면에서는 접은글이 항상 펼쳐져 있고 제목을 눌러도 접히지 않습니다. 저장 HTML에서 접혀 있는 글은 제목 앞에 ▸ 표시가 붙습니다.

접은글 안에 커서를 두면 오른쪽 위에 막대가 뜹니다.

• 처음부터 펼쳐 두기: 켜면 저장 HTML에 open 속성이 붙어, 읽는 사람에게 펼쳐진 채로 보입니다. 기본은 꺼짐(접힌 채)입니다.
• 접은글 해제: 접은글을 풀고 내용만 남깁니다.

읽기 전용(readOnly: true 또는 setReadOnly(true))으로 바꾸면 저장될 모양 그대로 접히고, 제목을 눌러 펼칠 수 있습니다.

저장되는 HTML

<details style="border: 1px solid #d0d7de; border-radius: 8px; padding: 8px 14px; margin: 0.8em 0">
  <summary style="font-weight: 600">정답 보기</summary>
  <p>한라산 (1,947m)</p>
</details>

새 접은글의 제목 기본값은 화면 문구 detailsSummary 입니다. 바꾸려면 locale 옵션을 씁니다.

createEditor('#editor', {
  locale: { detailsSummary: '펼쳐 보기' },
});

editor.exec('details');      // 넣기 / 풀기
editor.exec('detailsOpen');  // 처음부터 펼쳐 두기 켜고 끄기

프리셋

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

옵션