Editor
A powerful rich text editor component with advanced features.
Overview
The Editor is a WYSIWYG editor for creating formatted text.
Live Example:
Preview:
React Usage
How to use the Editor component in React.
HTML
import { Editor } from 'podo-ui';
return function MyComponent() {
const [content, setContent] = useState('');
return (
<Editor
value={content}
onChange={setContent}
height="400px"
placeholder="Start writing here..."
/>
);
}Key Features
- Text formatting (bold, italic, underline, strikethrough)
- Font size and style
- Paragraph styles (headings, body)
- Text and background colors
- Text alignment
- Ordered/unordered lists
- Table insertion and editing
- Horizontal rule
- Link insertion
- YouTube video embedding
- Code blocks
- Clear formatting
- Undo/redo
Height Settings
Auto height
HTML
<Editor
value={content}
onChange={setContent}
height="contents"
minHeight="150px"
maxHeight="500px"
placeholder="Height adjusts automatically based on content..."
/>Resizable
Users can resize the editor
HTML
<Editor
value={content}
onChange={setContent}
height="300px"
minHeight="200px"
maxHeight="600px"
resizable={true}
placeholder="This is a resizable editor..."
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | '' | HTML content of the editor |
| onChange | function | - | Function called when content changes |
| height | string | 'contents' | '400px' | Editor height (px or 'contents') |
| minHeight | string | - | Minimum height |
| maxHeight | string | - | Maximum height |
| width | string | '100%' | Editor width |
| resizable | boolean | false | Whether users can resize the editor |
| placeholder | string | '' | Text displayed when editor is empty |
| validator | z.ZodType | - | Zod schema for input validation |
| toolbar | ToolbarItem[] | - | Array of toolbar items to display |
Toolbar Customization
Use the toolbar prop to select which features to display in the editor.
Note: If toolbar is not specified, all features will be displayed.
Available Toolbar Items
| Item | Description |
|---|---|
'undo-redo' | Undo/redo |
'paragraph' | Paragraph styles (headings, body) |
'text-style' | Text formatting (bold, italic, underline, etc.) |
'color' | Text and background colors |
'align' | Text alignment |
'list' | Lists (ordered/unordered) |
'hr' | Horizontal rule |
'table' | Table insertion and editing |
'link' | Link insertion |
'image' | Image upload |
'youtube' | YouTube video embedding |
'format' | Clear formatting |
'code' | Code blocks |
Basic Editor (Limited features)
Advanced Editor (Extended features)
EditorView Component
EditorView displays HTML content created with the editor in read-only mode.
HTML
import { EditorView } from 'podo-ui';
return function MyComponent() {
const htmlContent = '<h1>제목</h1><p>본문 내용</p>';
return (
<EditorView value={htmlContent} />
);
}Preview
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | '' | HTML content to display |
| className | string | - | Additional CSS class |
Key Features
- Supports all editor formatting
- Automatic dark mode support
- Code block syntax highlighting
- Responsive layout
- Read-only (not editable)