툴바 배치

툴바에 버튼이 많을 때 어떻게 보일지 정합니다. 기본은 한 줄에 들어가는 만큼만 보이고 나머지는 ⋯ 메뉴로 접습니다. 어떤 버튼을 넣을지는 툴바 문서를 보세요.

createEditor('#editor', {
  toolbar: 'full',
  toolbarMode: 'wrap',
  toolbarDensity: 'compact',
  toolbarSticky: true,
});

넘칠 때: 접기와 줄바꿈

• toolbarMode: 'more' (기본) 툴바는 한 줄입니다. 들어가지 않는 묶음은 뒤에서부터 통째로 ⋯ 메뉴로 옮깁니다. 묶음 하나도 안 들어가면 그 묶음의 끝 버튼부터 하나씩 옮깁니다. 에디터 너비가 바뀌면 다시 계산합니다.
• toolbarMode: 'wrap' 버튼이 넘치면 여러 줄로 내려갑니다. 관리자 화면처럼 넓고 버튼을 다 보여 줘야 할 때 씁니다.
• 두 방식 모두 툴바 문자열의 more 뒤에 둔 버튼은 처음부터 ⋯ 메뉴에 들어갑니다. ⋯ 버튼은 넣을 것이 있을 때만 보입니다.

createEditor('#editor', {
  // 앞쪽은 늘 보이고, more 뒤는 ⋯ 메뉴
  toolbar: 'heading | bold underline color | link image | more | findReplace source',
  toolbarMode: 'wrap',
});

촘촘한 툴바

toolbarDensity: 'compact' 는 버튼과 묶음 사이를 좁힙니다. 버튼은 26px(휴대폰에서는 32px)이 됩니다. 댓글창이나 좁은 사이드 패널처럼 툴바가 크게 보이면 안 되는 곳에 맞습니다.

위에 붙는 툴바

toolbarSticky 는 기본으로 켜져 있습니다. 긴 글을 쓰며 페이지를 내려도 툴바가 화면 위에 붙어 있습니다. 사이트에 고정된 머리글이 있어 툴바가 그 밑에 가려지면 CSS로 붙는 위치를 내리세요.

.e82-toolbar.is-sticky { top: 64px; } /* 사이트 머리글 높이만큼 */

height 를 숫자로 주면 편집 영역 안에서 스크롤되므로 툴바는 원래 위에 있습니다. 붙는 툴바는 내용만큼 늘어나는 에디터에서 쓸모가 있습니다 (에디터 크기 참고).

휴대폰 툴바

화면 너비가 640px 이하이거나 터치 화면이면 툴바가 휴대폰용으로 바뀝니다.

• 버튼은 누르기 쉬운 40px 크기로 커지고, 툴바는 한 줄로 옆으로 밀어서 봅니다. ⋯ 버튼은 오른쪽 끝에 붙어 있습니다.
• 툴바를 지정하지 않았거나 'board' 이면 사진·굵게·글자색·문단·글머리 목록·가운데 정렬·링크·실행 취소만 앞에 두고 나머지는 ⋯ 메뉴로 넣습니다.
• 직접 쓴 툴바 문자열이나 다른 프리셋은 순서를 바꾸지 않고 그대로 한 줄로 보여 줍니다.
• 화면을 돌려 너비가 바뀌면 툴바를 다시 그립니다.

키보드로 툴바 다루기

툴바는 Tab 한 번에 들어가고, 안에서는 ← → Home End 로 버튼을 옮겨 다닙니다. 자세한 내용은 접근성에 있습니다.

옵션