Embed images and videos in rich text
Insert images, links, and videos
Click here to start editing. Try adding images, links, or videos!
Track embedded content
No media inserted yet.
Generated markup
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');
