---
title: "Iframe Plugin"
description: "Runs the editor inside an iframe for complete CSS isolation, with custom stylesheets, auto-height, sandboxing, and full HTML document editing."
metadata:
- name: keywords
content: "jodit, iframe plugin, css isolation, iframestyle, edithtmldocumentmode, auto height, sandbox"
---
# Iframe Plugin
Enables the Jodit editor to run inside an iframe instead of using a DIV element. This provides complete CSS isolation, allowing custom styles for the editor content without affecting or being affected by the host page's styles.
## Features
- Complete CSS isolation from the host page
- Custom stylesheets for editor content
- Inline style injection
- Custom DOCTYPE and base URL support
- Automatic height adjustment
- Edit full HTML documents (including html, head, body tags)
- Sandbox attribute support for security
- Event forwarding from iframe to host
- Customizable iframe document structure
- ResizeObserver integration for auto-height
### `iframe`
**Type:** `boolean`
**Default:** `false`
Enables iframe mode. When `true`, the editor content is rendered inside an iframe instead of a regular DIV.
**Example:**
```typescript
const editor = Jodit.make('#editor', {
iframe: true
});
```
### `iframeBaseUrl`
**Type:** `string`
**Default:** `''`
Sets the base URL for the iframe document. This affects how relative URLs in the content are resolved.
**Example:**
```typescript
const editor = Jodit.make('#editor', {
iframe: true,
iframeBaseUrl: 'https://example.com/content/'
});
```
### `iframeTitle`
**Type:** `string`
**Default:** `'Jodit Editor'`
Sets the title of the iframe document.
**Example:**
```typescript
const editor = Jodit.make('#editor', {
iframe: true,
iframeTitle: 'My Custom Editor'
});
```
### `iframeDoctype`
**Type:** `string`
**Default:** `''`
Sets the DOCTYPE declaration for the iframe document.
**Example:**
```typescript
const editor = Jodit.make('#editor', {
iframe: true,
iframeDoctype: ''
});
```
### `iframeStyle`
**Type:** `string`
**Default:** (see notes)
Custom inline CSS to be injected into the iframe document. The default includes basic styling for html, body, tables, paragraphs, and disabled states.
**Default value:**
```css
html{margin:0;padding:0;min-height:100%;}
body{box-sizing:border-box;font-size:13px;line-height:1.6;padding:10px;margin:0;background:transparent;color:#000;position:relative;z-index:2;user-select:auto;overflow:auto;outline:none;}
table{width:100%;border:none;border-collapse:collapse;empty-cells:show;max-width:100%;}
th,td{padding:2px 5px;border:1px solid #ccc;user-select:text;}
p{margin-top:0;}
.jodit_disabled{user-select:none;}
```
**Example:**
```typescript
const editor = Jodit.make('#editor', {
iframe: true,
iframeStyle: 'body{font-family:Arial;font-size:14px;background:#fff;}'
});
```
### `iframeCSSLinks`
**Type:** `string[]`
**Default:** `[]`
Array of external CSS file URLs to load into the iframe document.
**Example:**
```typescript
const editor = Jodit.make('#editor', {
iframe: true,
iframeCSSLinks: [
'/css/editor-content.css',
'https://fonts.googleapis.com/css?family=Roboto'
]
});
```
### `iframeSandbox`
**Type:** `string | null`
**Default:** `null`
Sets the sandbox attribute for the iframe. When set to an empty string, all restrictions are enabled. When `null`, no sandbox attribute is added.
**Example:**
```typescript
const editor = Jodit.make('#editor', {
iframe: true,
iframeSandbox: 'allow-same-origin allow-scripts'
});
```
### `iframeDefaultSrc`
**Type:** `string`
**Default:** `'about:blank'`
Sets the initial src attribute of the iframe.
**Example:**
```typescript
const editor = Jodit.make('#editor', {
iframe: true,
iframeDefaultSrc: 'about:blank'
});
```
### `editHTMLDocumentMode`
**Type:** `boolean`
**Default:** `false`
When enabled, allows editing the entire HTML document structure (including ``, ``, and `` tags). Requires the source element to be a TEXTAREA or INPUT.
**Example:**
```typescript
const editor = Jodit.make('textarea', {
iframe: true,
editHTMLDocumentMode: true
});
```
### Basic Iframe Mode
```typescript
const editor = Jodit.make('#editor', {
iframe: true
});
```
### With Custom Styles
```typescript
const editor = Jodit.make('#editor', {
iframe: true,
iframeStyle: `
body {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 1.8;
color: #333;
max-width: 800px;
margin: 0 auto;
}
`
});
```
### With External Stylesheets
```typescript
const editor = Jodit.make('#editor', {
iframe: true,
iframeCSSLinks: [
'/css/editor-content.css',
'/css/print.css'
]
});
```
### With Base URL
```typescript
const editor = Jodit.make('#editor', {
iframe: true,
iframeBaseUrl: 'https://example.com/articles/',
iframeTitle: 'Article Editor'
});
```
### Edit Full HTML Documents
```typescript
// Source element must be textarea or input
const editor = Jodit.make('textarea', {
iframe: true,
editHTMLDocumentMode: true
});
// Can edit full HTML including head and body
editor.value = `
My Page
Content
`;
```
### With Sandbox Restrictions
```typescript
const editor = Jodit.make('#editor', {
iframe: true,
iframeSandbox: 'allow-same-origin allow-scripts allow-forms'
});
```
### Auto-Height Iframe
```typescript
const editor = Jodit.make('#editor', {
iframe: true,
height: 'auto' // Iframe automatically adjusts to content height
});
```
### Combined Configuration
```typescript
const editor = Jodit.make('#editor', {
iframe: true,
iframeTitle: 'Content Editor',
iframeBaseUrl: '/content/',
iframeStyle: `
body {
font-family: Arial, sans-serif;
padding: 20px;
}
h1 { color: #2c3e50; }
a { color: #3498db; }
`,
iframeCSSLinks: [
'/css/editor.css'
],
height: 'auto'
});
```
### Plugin Initialization
When iframe mode is enabled:
1. **Iframe Creation**: Creates an `