에디터
강력한 기능을 제공하는 리치 텍스트 에디터 컴포넌트입니다.
개요
에디터는 서식 있는 텍스트를 작성할 수 있는 WYSIWYG 에디터입니다.
실제 예제:
미리보기:
React 사용법
React에서 Editor 컴포넌트를 사용하는 방법입니다.
HTML
import { Editor } from 'podo-ui';
export default function MyComponent() {
const [content, setContent] = useState('');
return (
<Editor
value={content}
onChange={setContent}
height="400px"
placeholder="여기에 내용을 작성하세요..."
/>
);
}주요 기능
- 텍스트 서식 (굵게, 기울임, 밑줄, 취소선)
- 글꼴 크기 및 스타일
- 단락 스타일 (제목, 본문)
- 텍스트 및 배경 색상
- 텍스트 정렬
- 순서 있는/없는 목록
- 표 삽입 및 편집
- 구분선
- 링크 삽입
- 유튜브 영상 삽입
- 코드 블록
- 서식 제거
- 실행 취소/다시 실행
높이 설정
자동 높이
HTML
<Editor
value={content}
onChange={setContent}
height="contents"
minHeight="150px"
maxHeight="500px"
placeholder="콘텐츠에 따라 높이가 자동으로 조절됩니다..."
/>크기 조절
사용자가 에디터 크기를 조절할 수 있습니다
HTML
<Editor
value={content}
onChange={setContent}
height="300px"
minHeight="200px"
maxHeight="600px"
resizable={true}
placeholder="크기를 조절할 수 있는 에디터입니다..."
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | '' | 에디터의 HTML 콘텐츠 |
| onChange | function | - | 콘텐츠 변경 시 호출되는 함수 |
| height | string | 'contents' | '400px' | 에디터 높이 (px 또는 'contents') |
| minHeight | string | - | 최소 높이 |
| maxHeight | string | - | 최대 높이 |
| width | string | '100%' | 에디터 너비 |
| resizable | boolean | false | 사용자가 크기를 조절할 수 있는지 여부 |
| placeholder | string | '' | 에디터가 비어있을 때 표시되는 텍스트 |
| validator | z.ZodType | - | 입력 검증을 위한 Zod 스키마 |
| toolbar | ToolbarItem[] | - | 표시할 툴바 항목 배열 |
툴바 커스터마이징
toolbar prop을 사용하여 에디터에 표시할 기능을 선택할 수 있습니다.
참고: toolbar를 지정하지 않으면 모든 기능이 표시됩니다.
사용 가능한 툴바 항목
| Item | Description |
|---|---|
'undo-redo' | 실행 취소/다시 실행 |
'paragraph' | 단락 스타일 (제목, 본문) |
'text-style' | 텍스트 서식 (굵게, 기울임, 밑줄 등) |
'color' | 텍스트 및 배경 색상 |
'align' | 텍스트 정렬 |
'list' | 목록 (순서 있는/없는) |
'hr' | 구분선 |
'table' | 표 삽입 및 편집 |
'link' | 링크 삽입 |
'image' | 이미지 업로드 |
'youtube' | 유튜브 영상 삽입 |
'format' | 서식 제거 |
'code' | 코드 블록 |
기본 에디터 (제한된 기능)
고급 에디터 (확장된 기능)
EditorView 컴포넌트
EditorView는 에디터로 작성된 HTML 콘텐츠를 읽기 전용으로 표시합니다.
HTML
import { EditorView } from 'podo-ui';
export default function MyComponent() {
const htmlContent = '<h1>제목</h1><p>본문 내용</p>';
return (
<EditorView value={htmlContent} />
);
}미리보기
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | '' | 표시할 HTML 콘텐츠 |
| className | string | - | 추가 CSS 클래스 |
주요 기능
- 에디터의 모든 서식 지원
- 다크 모드 자동 적용
- 코드 블록 구문 강조
- 반응형 레이아웃
- 읽기 전용 (편집 불가)