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:

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

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

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

Custom Toolbar Configuration

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'
        ]
    }
});
Copy

Programmatic Usage

You can programmatically trigger the iframe editor dialog:

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);
}
Copy

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.

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

Interface Reference

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
}
Copy

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.