216 lines
4.3 KiB
Plaintext
216 lines
4.3 KiB
Plaintext
---
|
||
title: "Rich Text Editor"
|
||
description: "Advanced content editor with embeds, photo grids, and full formatting"
|
||
---
|
||
|
||
# Rich Text Editor
|
||
|
||
A powerful content editor used throughout the admin panel for blogs, projects, and products.
|
||
|
||
## Text Formatting
|
||
|
||
| Feature | How to Use |
|
||
|---------|------------|
|
||
| Bold | Select text → Click **B** or `Ctrl+B` |
|
||
| Italic | Select text → Click **I** or `Ctrl+I` |
|
||
| Underline | Select text → Click **U** or `Ctrl+U` |
|
||
| Headings | Select text → Click H1, H2, or H3 |
|
||
| Lists | Click bullet or numbered list icon |
|
||
| Alignment | Click align left/center/right/justify |
|
||
|
||
## Font & Color
|
||
|
||
### Change Font
|
||
1. Select text
|
||
2. Click **Font** button
|
||
3. Choose from Google Fonts or custom fonts
|
||
4. Font applies immediately
|
||
|
||
### Change Color
|
||
1. Select text
|
||
2. Click **Color** button
|
||
3. Pick from palette, use color picker, or enter hex code
|
||
4. Click **Apply**
|
||
|
||
### Change Size
|
||
1. Select text
|
||
2. Click **Size** button
|
||
3. Choose preset (Tiny to Huge) or enter custom size
|
||
4. Click **Apply**
|
||
|
||
## Images
|
||
|
||
### Insert Image
|
||
|
||
1. Click **Image** button (camera icon)
|
||
2. Choose method:
|
||
- **URL**: Paste image URL
|
||
- **Upload**: Select file from computer
|
||
3. Click **Insert**
|
||
|
||
### Resize Image
|
||
|
||
1. Click image to select (green border appears)
|
||
2. Drag handles:
|
||
- **Corners**: Maintain aspect ratio
|
||
- **Edges**: Resize one dimension
|
||
|
||
### Text Wrap
|
||
|
||
1. Select image
|
||
2. Align left or right
|
||
3. Click **Text Wrap** button
|
||
4. Adjust gap (0-50px)
|
||
5. Toggle wrap ON
|
||
|
||
## Embeds
|
||
|
||
Embed external content like YouTube videos, Google Maps, or any iframe.
|
||
|
||
### Insert Embed
|
||
|
||
1. Click **Embed** button
|
||
2. Switch to **Code View**
|
||
3. Paste embed code:
|
||
```html
|
||
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
|
||
width="560" height="315"></iframe>
|
||
```
|
||
4. Switch to **Preview** to verify
|
||
5. Click **Insert Embed**
|
||
|
||
### Customize Embed
|
||
|
||
After inserting:
|
||
- **Resize**: Drag corner/edge handles
|
||
- **Border**: Click Border button to add/customize
|
||
- **Align**: Use alignment buttons
|
||
- **Edit Code**: Click Code button to modify
|
||
|
||
### Supported Embeds
|
||
|
||
- YouTube
|
||
- Vimeo
|
||
- Google Maps
|
||
- Twitter/X
|
||
- Instagram
|
||
- CodePen
|
||
- Any iframe
|
||
|
||
## Photo Grids
|
||
|
||
Insert beautiful image layouts with 24 pre-designed templates.
|
||
|
||
### Insert Photo Grid
|
||
|
||
1. Click **Grid** button (Grid3x3 icon)
|
||
2. Browse 24 layout options
|
||
3. Click preferred layout
|
||
4. Add images to each cell:
|
||
- Click cell
|
||
- Choose URL or Upload
|
||
- Click **Add Image**
|
||
5. Click **Insert Grid**
|
||
|
||
### Layout Categories
|
||
|
||
| Category | Layouts |
|
||
|----------|---------|
|
||
| Simple | 2-4 columns, 2x2, 3x2 grids |
|
||
| Asymmetric | Large + small combinations |
|
||
| Creative | Masonry, featured layouts |
|
||
| Gallery | Portfolio-style arrangements |
|
||
| Special | Hero + grid, collage styles |
|
||
|
||
### Edit Grid
|
||
|
||
1. Hover over grid in editor
|
||
2. Click **Settings** icon to edit
|
||
3. Click **Delete** icon to remove
|
||
|
||
## Tables
|
||
|
||
### Insert Table
|
||
|
||
1. Click **Table** button
|
||
2. Select dimensions (rows × columns)
|
||
3. Table appears in editor
|
||
|
||
### Edit Table
|
||
|
||
- Click cells to edit content
|
||
- Use table controls to:
|
||
- Add/remove rows
|
||
- Add/remove columns
|
||
- Merge cells
|
||
- Set alignment
|
||
|
||
## Links
|
||
|
||
### Link Selected Text
|
||
|
||
1. Select text
|
||
2. Click **Link** button (chain icon)
|
||
3. Enter URL
|
||
4. Press Enter or click **Insert**
|
||
|
||
### Insert New Link
|
||
|
||
1. Click **Link** button (no selection)
|
||
2. Enter link title
|
||
3. Enter URL
|
||
4. Click **Insert**
|
||
|
||
### Edit Link
|
||
|
||
1. Click existing link
|
||
2. Modify URL or title
|
||
3. Click **Update** or **Remove Link**
|
||
|
||
## Blockquotes
|
||
|
||
### Insert Quote
|
||
|
||
1. Click **Quote** button
|
||
2. Enter quote text
|
||
3. Customize colors:
|
||
- Background color
|
||
- Border color
|
||
4. Click **Insert Quote**
|
||
|
||
### Edit Quote
|
||
|
||
1. Click existing quote
|
||
2. Modify text or colors
|
||
3. Click **Update Quote**
|
||
|
||
## Code Blocks
|
||
|
||
1. Click **Code** button
|
||
2. Enter code
|
||
3. Code appears with monospace formatting
|
||
|
||
## Keyboard Shortcuts
|
||
|
||
| Shortcut | Action |
|
||
|----------|--------|
|
||
| `Ctrl+B` | Bold |
|
||
| `Ctrl+I` | Italic |
|
||
| `Ctrl+U` | Underline |
|
||
| `Delete` | Delete selected image/embed |
|
||
| `Enter` | Quick insert/update in dialogs |
|
||
|
||
## Tips
|
||
|
||
<Tip>
|
||
Use **Photo Grids** for showcasing multiple images instead of inserting them one by one.
|
||
</Tip>
|
||
|
||
<Tip>
|
||
**Embed dimensions** in your code determine the display size everywhere (editor, cards, modals).
|
||
</Tip>
|
||
|
||
<Warning>
|
||
Only embed content from trusted sources for security.
|
||
</Warning>
|