---
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>