editor

문서 › 글자와 문단

정렬과 들여쓰기

왼쪽·가운데·오른쪽·양쪽 정렬, 정렬 메뉴, 들여쓰기와 내어쓰기.

문단을 가운데나 오른쪽으로 맞추고, 문단 앞에 여백을 넣거나 뺍니다. 정렬은 글자가 아니라 문단 단위로 들어갑니다.

직접 써 보기

이 데모의 코드

createEditor('#editor', {
  toolbar: 'alignMenu | alignLeft alignCenter alignRight alignJustify | indent outdent',
});

정렬

툴바 이름기능단축키
alignLeft왼쪽 정렬 (정렬 지정을 지움)Ctrl+Shift+L
alignCenter가운데 정렬Ctrl+Shift+E
alignRight오른쪽 정렬Ctrl+Shift+R
alignJustify양쪽 정렬Ctrl+Shift+J
alignMenu네 가지를 한 버튼의 메뉴로—
alignCenterToggle가운데 ↔ 왼쪽을 번갈아 바꾸는 버튼—

사진을 선택한 상태에서 왼쪽·가운데·오른쪽 정렬을 누르면 문단이 아니라 사진이 정렬됩니다 (사진).

들여쓰기와 내어쓰기

  • indent / outdent, 단축키 Ctrl+] / Ctrl+[
  • 보통 문단은 누를 때마다 왼쪽 여백이 40px씩 늘고 줄어듭니다.
  • 목록 안에서는 항목이 한 단계 안쪽 목록으로 들어가거나 나옵니다. 목록에서는 Tab / Shift+Tab 도 같습니다.
  • 표 칸에는 들여쓰기가 들어가지 않습니다.

프리셋과 휴대폰

  • board(기본), basic: 첫 줄에 alignMenu. board 는 들여쓰기·내어쓰기가 ⋯ 더 보기 안
  • full: 정렬 버튼 네 개와 들여쓰기·내어쓰기가 첫 줄
  • 휴대폰 툴바에는 자리를 아끼려고 alignCenterToggle 버튼 하나가 나옵니다.

저장되는 HTML

<p style="text-align: center">가운데</p>
<p style="text-align: right">오른쪽</p>
<p style="margin-left: 40px">들여쓰기</p>

API

editor.exec('alignCenter');
editor.exec('align', 'justify'); // 메뉴와 같은 명령: left | center | right | justify
editor.exec('indent');

옵션

이름타입기본값설명
alignLeft alignCenter alignRight alignJustifytoolbar item—정렬 버튼
alignMenutoolbar item—정렬 메뉴 (버튼 하나)
alignCenterToggletoolbar item—가운데 정렬 켜고 끄기
indent outdenttoolbar item—들여쓰기, 내어쓰기