서식 지우기
설명
clearFormat() 은 캐럿(caret)이 닿은 모든 wing 기능을 걷습니다.
| 갈래 | 어떻게 되나 |
|---|---|
| 인라인 마크(mark) | 벗깁니다. 선택이 있으면 그 범위, 캐럿뿐이면 감싼 마크 통째로 |
| 블록 속성(block attribute) | 뗍니다 — 정렬·드롭 캡·서체·글자 크기 |
| 블록 종류 | 문단으로 내려앉힙니다 — 제목 |
| 리스트 | 풉니다 — 항목마다 문단 하나 |
| 물건 블록(object block) | 건드리지 않습니다 — 표·이미지·유튜브·접기 상자·코드 |
마지막 줄이 이 wing 의 경계입니다. 구조는 서식이 아니라, 표를 서식 지우기로 치우면 지우기가 아니라 삭제가 됩니다. 표 칸 안에서 누르면 그 칸의 글자 서식만 걷히고 격자는 남습니다. 물건을 치우는 길은 각 wing 의 커맨드와 Backspace 로 따로 있습니다.
- 소유한 태그도 속성도 없습니다. 필터링에 관여하지 않으므로 등록해도 값의 모양은 달라지지 않고 버튼 하나가 늘어납니다.
- 무엇이 서식인지는 스키마에 물어봅니다. 안에 wing 목록을 두지 않아 등록된 wing 이 늘어나면 함께 걷힙니다.
- 켜짐 상태가 없는 한 방향 동작입니다. 걷을 것이 없으면 되돌리기 지점도 생기지 않고, 걷었으면 되돌리기 한 번으로 전부 돌아옵니다.
- 마크를 쓸 수 있는 자리(문단·제목·리스트 항목·표 칸)에서만 툴바에 뜹니다.
데모
wing
HTML에디터를 불러오는 중…
미리보기위의 값을 읽는 사람 화면에 그대로 그린 자리입니다. 편집 화면에서는 안 도는 기능이 여기서 동작합니다 — 표 제목을 눌러 정렬하고, 이미지를 눌러 크게 보세요.
설치
npm install nabi-note코드
import { nabi } from 'nabi-note'
import 'nabi-note/style.css'
nabi.create('#editor', {
wings: [],
locale: 'ko',
onChange: (html) => 저장(html),
})