에디터 크기

편집 영역의 높이를 정합니다. 높이를 고정하거나, 내용만큼 늘어나게 하거나, 쓰는 사람이 직접 늘리고 전체화면으로 펼치게 할 수 있습니다.

createEditor('#editor', {
  toolbar: 'heading | bold color | bulletList | link image | fullscreen',
  height: 'auto',
  minHeight: 120,
  maxHeight: 320,
  placeholder: '문의 내용을 적어 주세요',
});

위 에디터는 비어 있어서 안내 글이 보입니다. 줄을 늘려 쓰면 320px까지 커지고 그 뒤로는 안에서 스크롤됩니다. 툴바 끝 버튼이나 Ctrl+Shift+F 로 전체화면을 열고 Esc 로 닫습니다.

높이 정하기

• 아무것도 주지 않으면 편집 영역은 최소 300px이고, 내용이 많아지면 페이지와 함께 길어집니다. 툴바는 위에 붙어 따라옵니다.
• height: 400 처럼 숫자를 주면 높이가 고정되고 넘치는 내용은 편집 영역 안에서 스크롤됩니다.
• height: 'auto' 는 내용만큼만 커집니다. minHeight 로 처음 크기를, maxHeight 로 더 커지지 않을 높이를 정하세요. maxHeight 를 넘으면 안에서 스크롤됩니다.
• minHeight 와 maxHeight 는 다른 방식과도 같이 쓸 수 있습니다. 숫자는 모두 px입니다.

// 댓글창: 작게 시작해서 늘어나기
createEditor('#comment', { toolbar: 'minimal', height: 'auto', minHeight: 80, maxHeight: 240 });

// 관리자 글쓰기: 고정 높이
createEditor('#editor', { height: 500 });

크기 조절 손잡이

상태바 오른쪽 끝의 손잡이를 끌면 높이를 바꿉니다 (가장 작게 120px). resizable: false 면 손잡이가 없고, height: 'auto' 일 때도 나오지 않습니다. 손잡이는 상태바 안에 있어서 statusbar: false 면 같이 숨습니다. 마우스로 끄는 기능이라 휴대폰에서는 쓰지 않습니다.

전체화면

• 툴바 항목 이름은 fullscreen 입니다. board 프리셋에서는 ⋯ 메뉴에, full 프리셋에서도 ⋯ 메뉴 쪽에 있습니다.
• Ctrl+Shift+F (맥은 ⌘+Shift+F) 로 켜고 끄고, Esc 로 닫습니다.
• 전체화면에서는 에디터가 창 전체를 덮고 페이지 스크롤을 막습니다. 글은 가운데 최대 860px 폭으로 보여서 넓은 모니터에서도 읽기 편합니다.
• 읽기 전용일 때도 쓸 수 있습니다.

editor.toggleFullscreen();      // 켜기·끄기
editor.toggleFullscreen(false); // 끄기

editor.on('fullscreen', (open) => {
  document.querySelector('.site-header').hidden = open;
});

안내 글 (placeholder)

편집 영역이 비어 있을 때 흐린 글씨로 보입니다. 주지 않으면 화면 언어의 기본 문구("내용을 입력하세요", 영어는 "Start writing…")가 나옵니다. 이 글은 화면 읽기 프로그램이 읽는 편집 영역 이름(aria-label)으로도 쓰이니 무엇을 쓰는 칸인지 알 수 있게 적으세요. 저장되는 HTML에는 들어가지 않습니다.

옵션