Inline Popup Plugin

Provides context-sensitive inline popup toolbars for various elements in the editor. This plugin displays customizable toolbars when clicking on images, links, table cells, or selecting text.

FeaturesFeatures

• Inline popup toolbars for specific elements (images, links, tables, etc.)
• Selection toolbar for highlighted text
• Customizable button sets for each element type
• Automatic positioning near target element
• Exclude specific elements from popup display
• Disable specific buttons in inline toolbar
• Function-based dynamic content
• Mobile-optimized with extra buttons
• Auto-hide on click outside or editor changes

toolbarInlinetoolbarInline

Type: boolean | Default: true

Enables inline popup toolbars.

toolbarInlineForSelectiontoolbarInlineForSelection

Type: boolean | Default: false

Shows inline toolbar when text is selected.

toolbarInlineDisableFortoolbarInlineDisableFor

Type: string | string[] | Default: []

Element types to exclude from inline popups.

Example:

Jodit.make('#editor', {
    toolbarInlineDisableFor: ['img', 'table']
});

toolbarInlineDisabledButtonstoolbarInlineDisabledButtons

Type: string[] | Default: ['source']

Buttons to exclude from inline toolbars.

popuppopup

Type: IDictionary<Array<string> | Function>

Default: Configured for a, img, cells, selection, toolbar, iframe

Defines toolbar buttons or content for each element type.

Example:

Jodit.make('#editor', {
    popup: {
        a: Jodit.atom(['link', 'unlink']),
        img: ['delete', 'resize', 'crop'],
        selection: ['bold', 'italic', 'underline']
    }
});

Basic UsageBasic Usage

const editor = Jodit.make('#editor', {
    toolbarInline: true,
    toolbarInlineForSelection: true
});

Custom Popup for LinksCustom Popup for Links

Jodit.make('#editor', {
    popup: {
        a: Jodit.atom(['link', 'unlink', 'delete'])
    }
});

Dynamic Popup ContentDynamic Popup Content

Jodit.make('#editor', {
    popup: {
        img: (editor, target, close) => {
            return ['delete', 'crop', { text: 'Custom', exec: () => {} }];
        }
    }
});

Disable For Specific ElementsDisable For Specific Elements

Jodit.make('#editor', {
    toolbarInlineDisableFor: ['table', 'img']
});

Default Popup ConfigurationsDefault Popup Configurations

• a (links): Link editing and unlinking tools
• img (images): Image manipulation tools
• cells (table cells): Table modification tools
• selection: Bold, italic, underline, lists, alignment, etc.
• toolbar: General inline toolbar
• iframe/jodit-media: Media element tools

How It WorksHow It Works

1. Click Detection: Listens for clicks on configured element types
2. Popup Display: Shows popup near clicked element with appropriate toolbar
3. Selection Handling: Optionally shows toolbar for text selections
4. Auto-Positioning: Positions popup relative to target element bounds
5. Auto-Hide: Closes on outside click, editor changes, or explicit close events

showPopupshowPopup

Programmatically show popup for an element.

Example:

editor.e.fire('showPopup', element, () => element.getBoundingClientRect(), 'img');

hidePopuphidePopup

Programmatically hide the popup.

Example:

editor.e.fire('hidePopup');

NotesNotes

• Use Jodit.atom() to replace default popup configuration entirely
• Without Jodit.atom(), custom configuration merges with defaults
• Popup automatically repositions on window resize
• Function-based popups receive editor, target element, and close callback
• Mobile view includes additional buttons not in inline toolbar
• Plugin requires select module as dependency

ClassesClasses

• inlinePopup