Loading challenge...
Rich Text Media
Embed images and videos in rich text
Rich Text Editor
Insert images, links, and videos
Click here to start editing. Try adding images, links, or videos!
Inserted Media
Track embedded content
(0 items)
No media inserted yet.
HTML Output
Generated markup
Automation Tips
Testing hints
// Test image insertion
await page.click('[data-testid="btn-add-image"]');
await page.fill('[data-testid="image-url-input"]', 'https://picsum.photos/400/300');
await page.fill('[data-testid="image-alt-input"]', 'Random image');
await page.click('[data-testid="insert-image-btn"]');
// Verify image was inserted
await expect(page.locator('[data-testid="media-count"]')).toHaveText('(1 items)');
await expect(page.locator('[data-testid="editor"] img')).toBeVisible();
// Test link insertion
await page.click('[data-testid="btn-add-link"]');
await page.fill('[data-testid="link-url-input"]', 'https://example.com');
await page.fill('[data-testid="link-text-input"]', 'Example Link');
await page.click('[data-testid="insert-link-btn"]');
// Verify link was inserted
await expect(page.locator('[data-testid="editor"] a')).toHaveText('Example Link');
await expect(page.locator('[data-testid="editor"] a')).toHaveAttribute('href', 'https://example.com');
// Test video insertion
await page.click('[data-testid="btn-add-video"]');
await page.fill('[data-testid="video-url-input"]', 'https://www.youtube.com/watch?v=dQw4w9WgXcQ');
await page.click('[data-testid="insert-video-btn"]');
// Verify iframe was inserted with correct embed URL
await expect(page.locator('[data-testid="editor"] iframe'))
.toHaveAttribute('src', /youtube.com/embed/);
// Check HTML output
const html = await page.locator('[data-testid="html-output"] pre').textContent();
expect(html).toContain('<img');
expect(html).toContain('<a');
expect(html).toContain('<iframe');
