# Iframe Editor Plugin

This plugin provides a dialog to insert and edit inline frames (`<iframe>` elements) into the editor content. It allows you to easily configure various iframe properties through a user-friendly interface.

## Features

- Insert new iframes with customizable properties
- Edit existing iframes by double-clicking on them
- Configure iframe dimensions, border, name, title, and more
- Responsive dialog interface

## Installation

Add "iframe-editor" to your Jodit's extraPlugins configuration:

```js
const editor = Jodit.make('#editor', {
    extraPlugins: ['iframe-editor']
});
```

## Usage

### Adding a new iframe

1. Click the "Iframe Editor" button in the toolbar
2. Enter the iframe URL and configure other properties
3. Click "Insert" to add the iframe to your content

### Editing an existing iframe

1. Double-click on an existing iframe in the editor
2. Modify the properties as needed
3. Click "Update" to apply the changes

## Properties

The plugin allows you to configure the following iframe properties:

### URL (src)

- Type: `string`
- Default: `''`
- Required: `true`

The source URL for the iframe content.

### Width

- Type: `number`
- Default: `400`

The width of the iframe in pixels.

### Height

- Type: `number`
- Default: `200`

The height of the iframe in pixels.

### Show frame border

- Type: `boolean`
- Default: `false`

Whether to display a border around the iframe. When enabled, sets the `frameborder` attribute to "1".

### Name

- Type: `string`
- Default: `''`

The name attribute for the iframe, which can be used as a target for form submissions or as a reference in JavaScript.

### Title

- Type: `string`
- Default: `''`

The title attribute for the iframe, which provides accessibility information and appears as a tooltip when hovering over the iframe.

### CSS Class (className)

- Type: `string`
- Default: `''`
- Interface property: `className`

Custom CSS class(es) to apply to the iframe element.

### Enable Scrollbars

- Type: `boolean`
- Default: `false`
- Interface property: `enableScrollbars`

Controls whether scrollbars are enabled for the iframe content. When set to `true`, the iframe will display scrollbars if the content exceeds the frame dimensions.

## Examples

### Basic Usage

```js
const editor = Jodit.make('#editor', {
    extraPlugins: ['iframe-editor'],
    buttons: ['bold', 'italic', 'iframeEditor']
});
```

### Custom Toolbar Configuration

```js
const editor = Jodit.make('#editor', {
    extraPlugins: ['iframe-editor'],
    toolbar: {
        items: [
            'source', '|',
            'bold', 'italic', '|',
            'ul', 'ol', '|',
            'font', 'fontsize', 'brush', 'paragraph', '|',
            'image', 'table', 'link', 'iframeEditor', '|',
            'undo', 'redo', '|',
            'hr', 'eraser', 'fullsize'
        ]
    }
});
```

### Programmatic Usage

You can programmatically trigger the iframe editor dialog:

```js
const editor = Jodit.make('#editor', {
    extraPlugins: ['iframe-editor']
});

// Open the iframe editor dialog to insert a new iframe
editor.events.fire('toggleIframeEditor');

// Edit an existing iframe
const iframe = editor.editor.querySelector('iframe');
if (iframe) {
    editor.events.fire('toggleIframeEditor', iframe);
}
```

## Integration with Other Plugins

The iframe-editor plugin requires the color-picker plugin, which is automatically included when you add iframe-editor to your extraPlugins list.

```js
const editor = Jodit.make('#editor', {
    extraPlugins: ['iframe-editor'] // color-picker is automatically included
});
```

## Interface Reference

```typescript
interface IframeEditorState {
    src: string;           // URL source for the iframe
    className: string;      // CSS class name(s) for styling
    width: number;          // Width in pixels
    height: number;         // Height in pixels
    enableScrollbars: boolean; // Enable/disable scrollbars
    frameBorder: boolean;   // Show/hide frame border
    name: string;           // Name attribute for the iframe
    title: string;          // Title for accessibility
}
```

## How It Works

1. The plugin adds an "Iframe Editor" button to the toolbar
2. When clicked, it opens a dialog with form fields for iframe properties
3. After filling in the required fields, clicking "Insert" adds the iframe to the editor
4. Double-clicking an existing iframe opens the same dialog with pre-filled values
5. The plugin handles all the necessary DOM operations to create or update the iframe element

This approach provides a user-friendly way to work with iframes without having to manually write HTML code.