Editor · Props
Editor 컴포넌트의 props, ref 핸들 메서드, 툴바 항목 레퍼런스.
EditorProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| value | string | - | 제어 컴포넌트용 HTML 문자열 |
| defaultValue | string | '' | 비제어 초기 HTML |
| onChange | (html: string) => void | - | 내용 변경 콜백 |
| placeholder | string | '내용을 입력하세요…' | 빈 상태 안내 문구 |
| readOnly | boolean | false | 읽기 전용 — 편집·툴바 비활성 |
| toolbar | ToolbarConfig | false | 전체 툴바 | 툴바 구성(1D/2D 배열) 또는 숨김 |
| onImageUpload | (file: File) => Promise<string> | base64 | 이미지 업로드 핸들러. 반환 URL을 src로 삽입 |
| minHeight | number | string | 240 | 본문 최소 높이 |
| maxHeight | number | string | - | 본문 최대 높이(초과 시 스크롤) |
| className | string | - | 루트 className |
| contentClassName | string | - | 본문(편집) 영역 className |
| ariaLabel | string | '리치 텍스트 편집기' | 본문 ARIA 라벨 |
EditorHandle (ref)
useRef<EditorHandle>로 명령형 API에 접근합니다.
| 메서드 | 반환 | 설명 |
|---|---|---|
| getHTML() | string | 현재 HTML 반환 |
| getText() | string | 마크업 제거한 순수 텍스트 반환 |
| setHTML(html) | void | HTML 설정(새니타이즈 후) + onChange 발생 |
| insertHTML(html) | void | 커서 위치에 HTML 삽입 |
| focus() | void | 본문 영역 포커스 |
| getElement() | HTMLDivElement | null | 내부 contentEditable 노드 |
ToolbarItem
toolbar prop에 넣을 수 있는 항목들. 2차원 배열로 그룹을 나눕니다.
| 항목 | 설명 |
|---|---|
| undo · redo | 실행 취소 / 다시 실행 |
| blockFormat | 문단/제목/인용구/코드 드롭다운 |
| fontSize | 글자 크기 드롭다운 |
| bold · italic · underline · strikethrough | 인라인 서식 |
| foreColor · backColor | 글자 색 / 형광펜 |
| bulletList · orderedList | 글머리 기호 / 번호 매기기 목록 |
| indent · outdent | 들여쓰기 / 내어쓰기 |
| alignLeft · alignCenter · alignRight · alignJustify | 정렬 |
| link · unlink | 링크 삽입·수정 / 제거 |
| image | 이미지 삽입(파일·붙여넣기·드롭) |
| blockquote · codeBlock · horizontalRule | 인용구 / 코드 블록 / 구분선 |
| clearFormat | 서식 지우기 |
| sourceCode · fullscreen | HTML 소스 토글 / 전체 화면 |
| separator | 시각적 구분선 |