강조 박스

안내, 팁, 주의할 점을 본문과 구분해 보여 줄 때 씁니다. 아이콘이 붙은 색 상자로 문단을 감쌉니다.

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

쓰는 법

• callout 메뉴에서 종류를 고르면 커서가 있는 문단(골랐으면 고른 문단들)이 상자에 들어가고 맨 앞에 아이콘이 붙습니다. 빈 줄에서 고르면 아이콘 바로 뒤에서 글을 쓸 수 있습니다.
• 상자 안에 커서를 두면 상자 오른쪽 위에 막대가 뜹니다. 다른 종류를 누르면 색과 아이콘이 바뀌고, 휴지통 버튼은 상자만 없애고 글은 남깁니다.
• 같은 종류를 한 번 더 고르거나, 상자 맨 앞에서 Backspace 를 눌러도 상자가 풀립니다.
• 빈 줄에서 / 를 치고 "강조 박스"를 고르면 정보 상자가 들어갑니다.
• 상자 안에 목록, 표, 다른 블록을 넣을 수 있습니다. 접은글 안에도 상자를 넣을 수 있습니다.

종류

저장되는 HTML

색과 모양이 인라인 스타일로 들어가므로 CSS가 없는 페이지에서도, 메일로 보내도 같은 상자로 보입니다. 아이콘은 첫 문단 앞의 평범한 글자입니다.

<div data-callout="tip" style="background-color: #fff9db; border-left: 4px solid #fcc419; border-radius: 8px; padding: 12px 16px; margin: 0.8em 0">
  <p>💡 사진은 가로로 찍으면 더 크게 보입니다.</p>
</div>

editor.exec('callout', 'warning'); // 상자 넣기, 종류 바꾸기
editor.exec('callout', '');        // 상자 없애기

프리셋

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

옵션