툴바
두 종류의 툴바를 속성으로 제어한다. 버튼은 Material 아이콘(SVG)이고 마우스를 올리면 툴팁(title)이 뜬다. 문구는 문자열 표를 따른다.
상단 툴바
html
<newtil-editor toolbar></newtil-editor>정본은 src/top-toolbar.ts. 왼쪽부터:
| 그룹 | 버튼 |
|---|---|
| 히스토리 | 되돌리기 · 다시 실행 |
| 블록 종류 | 드롭다운: 본문 / 제목 1 / 제목 2 / 제목 3 / 코드 블록 |
| 인라인 서식 | 굵게 · 기울임 · 밑줄 · 인라인 코드 · 링크(글자를 고른 뒤) · 글자 색(드롭다운 8색 + 색상 제거) |
| 블록 | 글머리 기호 목록 · 번호 목록 · 인용구 · 코드 블록 · 표 삽입(3×3) |
| 정렬·테두리 (0.10.9) | 왼쪽 · 가운데 · 오른쪽 정렬 버튼, 테두리 드롭다운(없음 / 얇은 선 / 굵은 선 / 점선 / 둥근 모서리 / 그림자) |
| 미디어 | 이미지(파일 선택 또는 URL) · 그림판 · 동영상(MP4 주소 또는 플랫폼 링크) |
| 표 안에서만 | 행+ · 열+ · 행− · 열− · 머리글 · 표 삭제 |
| 오른쪽 끝 | 마크다운 ↔ 디자인 모드 전환 |
- 커서 위치에 따라 블록 드롭다운·눌린 상태·정렬/테두리 값이 바뀌고, 표 안에 있을 때만 표 편집 버튼이 보인다.
- 블록 드롭다운으로 본문·제목을 고르면 목록 안이라도 먼저 목록을 완전히 빠져나온다.
- 정렬·테두리는 커서가 든 블록을 문단 상자로 감싼다. 이미지를 골랐으면 그 이미지의 속성을 바꾼다. 둘 다 없음이면 상자를 걷는다.
- 마크다운 모드에서는 모드 버튼만 남는다.
- 640px 이하에서는 툴바가 화면 위에 붙고(sticky) 넘치면 가로 스크롤로 한 줄을 유지한다.
플로팅 툴바
기본으로 켜져 있다. 글자를 드래그로 고르면 그 위에 뜬다(코드 블록 안, 읽기 전용, 노드 선택에서는 안 뜬다). 정본은 src/plugins/floating-toolbar.ts.
버튼: 굵게 · 기울임 · 밑줄 · 인라인 코드 · 코드 블록으로 · 링크 · 정렬(왼쪽/가운데/오른쪽) · 테두리 드롭다운 · 글자 색(팔레트 8색 + 제거)
html
<newtil-editor floating-toolbar="false"></newtil-editor> <!-- 끄기 -->첫 줄을 골라 위 공간이 없거나 상단 툴바를 덮게 되면 선택 아래로 내려온다(0.10.4).
이미지 도구
이미지를 고르면 이미지 자체에 도구가 붙는다: 오른쪽 아래 폭 손잡이, 원래 크기, 그림 고치기, 정렬·테두리. 자세한 것은 미디어 삽입, 그림판 연동.
드래그 핸들
블록 위에 마우스를 올리면 왼쪽에 여섯 점 핸들이 뜬다. 잡고 위아래로 끌어 블록 순서를 바꾼다(터치는 400ms 길게 누른 뒤). 드롭 위치는 세로 위치만 본다 — 핸들을 잡은 채 왼쪽 여백 위에서 움직여도 된다. 빈 문단에는 핸들이 붙지 않는다. 640px 이하에서는 핸들을 숨긴다.