Editor in an iframe - Iframe embedding - Examples

Editor in an iframe

This example shows the minimal setup for iframe mode. When you pass a css path, Redactor loads the editable surface inside an isolated iframe document. The toolbar and panels stay on the host page; styles from custom.css apply only inside the iframe and do not affect the surrounding page.

Select text, use formatting from the toolbar, and edit the sample content to see iframe editing in action.

Code

<div id="entry-iframe-basic"></div>

const app = Redactor('#entry-iframe-basic', {
    css: '/assets/redactor/',
    classname: 'article',
    content: [
        '<h2>Isolated content styles</h2>',
        '<p>The editor runs in an iframe when you set the css option. Content styles live only inside the iframe and do not leak to the host page.</p>',
        '<p class="highlight">This paragraph uses a custom class from custom.css setting.</p>'
    ].join(''),
    custom: {
        css: [
            '.article { font-family: Georgia, "Times New Roman", serif; line-height: 1.6; color: #1a1a1a; }',
            '.article h2 { color: #0d47a1; font-weight: 700; margin-top: 0; }',
            '.article .highlight { background: #fff3cd; padding: 12px 16px; border-left: 4px solid #ffc107; }'
        ]
    }
});

The css option enables iframe mode. Redactor loads redactor.min.css from that directory — this stylesheet is for editor internals only (placeholders, carets, block chrome), not for your content typography or layout.

Use custom.css to style the editable content. Two options:

External stylesheet — pass a URL or path to a .css file:

custom: {
    css: ['/assets/css/article.css']
}

Inline CSS — pass a string, as in the example above:

custom: {
    css: [
        '.article h2 { color: #0d47a1; }'
    ]
}

Both variants apply only inside the iframe and do not affect the host page.