문서 › 입력 도우미
선택 툴바
글자를 고르면 바로 위에 뜨는 작은 서식 툴바.
마우스로 글자를 고르면 그 위에 굵게, 글자색, 링크 같은 자주 쓰는 단추가 뜹니다. 툴바를 숨긴 깔끔한 화면에서도 서식을 넣을 수 있습니다.
직접 써 보기
이 문장의 아무 단어나 마우스로 끌어서 골라 보세요. 툴바가 없어도 바로 위에 서식 단추가 뜹니다.
고른 글자에 굵게, 글자색, 링크를 넣을 수 있습니다.
이 데모의 코드
createEditor('#editor', {
toolbar: false,
bubbleToolbar: true,
});들어 있는 단추
굵게, 기울임, 밑줄, 취소선, 인라인 코드 | 글자색, 배경색, 링크, 서식 지우기. 지금 고른 글자에 걸린 서식은 눌린 모양으로 보입니다. 단축키(Ctrl+B, Ctrl+K 등)는 그대로 씁니다.
뜨지 않는 경우
- 휴대폰, 태블릿처럼 터치 화면 — 브라우저의 선택 메뉴와 겹치지 않게 띄우지 않습니다.
- 코드 블록 안, 사진을 고른 상태, 표에서 칸을 여러 개 고른 상태
- 읽기 전용, HTML 소스 보기 중
- 공백만 고른 경우
옵션
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
bubbleToolbar | boolean | true | false 면 선택 툴바를 띄우지 않습니다. |
colors | string[] | 기본 팔레트 | 글자색 단추의 색 목록. 주면 선택 툴바의 배경색 단추도 이 목록을 씁니다. |