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.
Add "iframe-editor" to your Jodit's extraPlugins configuration:
Copyconst editor = Jodit.make('#editor', { extraPlugins: ['iframe-editor'] });
The plugin allows you to configure the following iframe properties:
string
''
true
The source URL for the iframe content.
number
400
The width of the iframe in pixels.
number
200
The height of the iframe in pixels.
boolean
false
Whether to display a border around the iframe. When enabled, sets the frameborder
attribute to "1".
string
''
The name attribute for the iframe, which can be used as a target for form submissions or as a reference in JavaScript.
string
''
The title attribute for the iframe, which provides accessibility information and appears as a tooltip when hovering over the iframe.
string
''
Custom CSS class(es) to apply to the iframe element.
Copyconst editor = Jodit.make('#editor', { extraPlugins: ['iframe-editor'], buttons: ['bold', 'italic', 'iframeEditor'] });
Copyconst 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' ] } });
You can programmatically trigger the iframe editor dialog:
Copyconst 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); }
The iframe-editor plugin requires the color-picker plugin, which is automatically included when you add iframe-editor to your extraPlugins list.
Copyconst editor = Jodit.make('#editor', { extraPlugins: ['iframe-editor'] // color-picker is automatically included });
This approach provides a user-friendly way to work with iframes without having to manually write HTML code.