• Jodit
  • PRO
  • Builder
  • Getting Started
  • Playground
  • Examples
  • Documentation
  • Download
  • Overview
  • Issue tracker
  • Docs
  • Plugins
  • Demo
  • Pricing
  • File Browser Pro
  • Sign in
Get connected wth us on social networks!

Footer

Jodit Core

  • Jodit Home page
  • Documentation
  • Playground
  • Examples
  • Github
  • Issues

Integration

  • Jodit React
  • Jodit Angular
  • Jodit Vue
  • Jodit Yii2
  • Jodit Joomla

PRO/OEM plugins

  • AutoComplete
  • Backup Plugin
  • Button Generator
  • Change case
  • Custom Color Picker
  • Emoji
  • Finder
  • Google Search
  • Paste code
  • Show Blocks
  • Virtual Keyboard
  • Tune block
  • Highlight signature
  • Google Maps Editor
  • Export in PDF
  • Page Break
  • Iframe Editor
  • Paste from Word PRO
  • Mobile View
  • ToDo List
  • Translate

Links

  • Demo PRO/OEM
  • Demo FileBrowser PRO
  • Price
  • License
  • Support
  • For resellers

Versions

  • site v.0.1.823
  • Jodit PRO v.4.6.9
  • Jodit v.4.6.2
  • All versions
2025 © Copyright: XDSoft.net <support@xdsoft.net>
  • Getting started

    • Installation
    • Usage
    • Support
    • FAQs
    • Cloud
    • Examples
  • How to

    • Create plugin
    • Add custom button
    • Add custom font in the font list
    • How to create module
    • How to generate license key
    • How to make a backend finder
    • How to set up document view
  • Modes

    • Source mode
  • Customisation

    • Theme
    • Keyboard
  • API

    • License Rest API
    • JS API
  • Changelog

  • Plugins

    • AutoComplete
    • Backup Plugin
    • Button Generator
    • Change case
    • Custom Color Picker
    • Emoji
    • Finder
    • Google Search
    • Paste code
    • Show Blocks
    • Virtual Keyboard
    • Tune block
    • Highlight signature
    • Google Maps Editor
    • Export in PDF
    • Page Break
    • Iframe Editor
    • Paste from Word PRO
    • Mobile View
    • ToDo List
    • Translate

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

  • Type: string
  • Default: ''

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

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

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.

Screenshots

Demo

Full demo including Premium Plugins! 

These examples display all of the plugins available with Jodit Editor PRO/OEM version.

Jodit Editor

Framework  plugins Complete  documentation Examples 
Try play