Media Plugin
Processes and decorates video and audio elements in the editor. This plugin wraps media elements (<video>, <audio>, and other configured tags) in a non-editable container to improve user experience when selecting and manipulating media content.
Features
- Automatic wrapping of media elements
- Non-editable media containers
- Draggable media elements
- Click-to-select functionality
- Preserves element styling
- Automatic cleanup on value extraction
- Customizable wrapper tag
- Configurable media element types
- Debounced processing for performance
mediaInFakeBlock
Type: boolean
Default: true
When true, wraps media elements (video, audio, etc.) in non-editable container blocks for easier selection and manipulation.
Example:
const editor = Jodit.make('#editor', {
    mediaInFakeBlock: true
});
mediaFakeTag
Type: string
Default: 'jodit-media'
The tag name used for the wrapper element around media content.
Example:
const editor = Jodit.make('#editor', {
    mediaFakeTag: 'jodit-media-wrapper'
});
mediaBlocks
Type: string[]
Default: ['video', 'audio']
Array of tag names that should be treated as media elements and wrapped in fake blocks.
Example:
const editor = Jodit.make('#editor', {
    mediaBlocks: ['video', 'audio', 'iframe', 'embed']
});
Basic Usage
const editor = Jodit.make('#editor', {
    mediaInFakeBlock: true
});
// Insert video element
editor.value = '<video src="video.mp4" controls></video>';
// Automatically wrapped in <jodit-media> container
Disable Media Wrapping
const editor = Jodit.make('#editor', {
    mediaInFakeBlock: false
});
// Media elements not wrapped
editor.value = '<video src="video.mp4" controls></video>';
Custom Wrapper Tag
const editor = Jodit.make('#editor', {
    mediaFakeTag: 'media-wrapper'
});
// Uses <media-wrapper> instead of <jodit-media>
editor.value = '<video src="video.mp4" controls></video>';
Custom Media Types
const editor = Jodit.make('#editor', {
    mediaBlocks: ['video', 'audio', 'iframe', 'object', 'embed']
});
// All specified elements will be wrapped
editor.value = `
    <video src="video.mp4" controls></video>
    <audio src="audio.mp3" controls></audio>
    <iframe src="https://example.com"></iframe>
`;
Only Audio Elements
const editor = Jodit.make('#editor', {
    mediaBlocks: ['audio']
});
// Only audio elements wrapped, video elements not affected
editor.value = `
    <video src="video.mp4" controls></video>
    <audio src="audio.mp3" controls></audio>
`;
Complete Configuration
const editor = Jodit.make('#editor', {
    mediaInFakeBlock: true,
    mediaFakeTag: 'jodit-media',
    mediaBlocks: ['video', 'audio', 'iframe']
});
Plugin Initialization
When mediaInFakeBlock is true, the plugin:
- Event Registration: Listens to afterGetValueFromEditor,change,afterInit,afterSetMode, andchangePlaceevents
- Media Detection: Searches for elements matching mediaBlocksselectors
- Wrapper Creation: Wraps detected media elements in fake blocks
- Cleanup: Removes wrapper tags when extracting editor value
Media Element Wrapping
When a media element is detected:
- Existing Wrapper Check: Checks if element already has data-jodit_iframe_wrapperparent
- Wrapper Creation (if not already wrapped):
- Creates element with tag name from mediaFakeTag
- Sets attributes:
- data-jodit-temp="1": Marks as temporary element
- contenteditable="false": Makes non-editable
- draggable="true": Enables drag-and-drop
- data-jodit_fake_wrapper="1": Internal marker
 
 
- Creates element with tag name from 
- Style Preservation: Copies styleattribute from original element
- Dimension Setting:
- Display mode: Preserves inline-blockor usesblock
- Width: Sets to element.offsetWidth
- Height: Sets to element.offsetHeight
 
- Display mode: Preserves 
- DOM Insertion: Inserts wrapper before original element and moves element inside
- Event Binding: Adds click/touch handlers to place cursor after element
Value Extraction Cleanup
When getting editor value (afterGetValueFromEditor event):
- Pattern Matching: Uses regex to find all wrapper tags:
    /<jodit-media[^>]+data-jodit_fake_wrapper[^>]+>([^]+?)<\/jodit-media>/ig
- Unwrapping: Replaces wrapper with its inner content
- Clean Output: Returns HTML without fake wrapper tags
Click/Touch Handling
When user clicks/touches a wrapped media element:
- Event Trigger: mousedown.selectortouchstart.selectevent fires
- Cursor Positioning: Calls editor.s.setCursorAfter(element)
- Selection: Places cursor immediately after the media element
Debounced Processing
The plugin uses debounced event handler with editor.defaultTimeout to:
- Prevent excessive re-processing during rapid changes
- Improve performance with multiple media elements
- Avoid redundant wrapper creation
Data Binding
Uses dataBind(elm, 'jodit_fake_wrapper', true) to:
- Mark elements as already processed
- Prevent duplicate wrapping
- Track wrapper status efficiently
Edge Cases
- 
Already Wrapped: If element has data-jodit_iframe_wrapperparent, uses existing wrapper
- 
Source Mode: Media processing is skipped when editor is in source code mode 
- 
Destruction: Processing stops if editor is destructed ( !editor.isDestructed)
- 
Style Preservation: Original element's styleattribute is copied to wrapper
- 
Display Mode: Wrapper respects original element's display mode (inline-block vs block) 
- 
Dimensions: Wrapper dimensions match original element's rendered size 
- 
Nested Wrappers: Plugin checks for existing wrappers to prevent nesting 
- 
Value Extraction: Wrapper tags are automatically removed from final HTML output 
- 
Event Namespacing: Uses .selectnamespace for clean event removal
- 
Multiple Elements: Handles multiple media elements in same editor instance 
Notes
- Plugin is functional (not class-based), registered via pluginSystem.add()
- Wrapper elements are marked with data-jodit-temp="1"for temporary status
- The contenteditable="false"attribute prevents accidental editing of media elements
- Drag-and-drop is enabled via draggable="true"on wrapper
- Click handling improves UX by placing cursor after media element instead of inside
- The plugin automatically processes new media elements added via paste or API
- Wrapper tags are completely removed when getting editor value (clean HTML output)
- Processing is debounced to avoid performance issues with multiple rapid changes
- The mediaBlocksarray can include any HTML tag names for custom media types
- Style and dimension preservation ensures media appears correctly in wrapped state
- Plugin works with both video and audio elements by default
- The fake wrapper approach solves browser inconsistencies with selecting/manipulating media elements
- Internal key jodit_fake_wrappertracks processing status to prevent duplicate wrapping
Typical Use Case
The media plugin solves a common problem in rich text editors: selecting and manipulating <video> and <audio> elements. By wrapping them in non-editable containers, users can:
- Click to select the entire media element (not the content inside)
- Drag and drop media elements easily
- Delete media elements with standard keyboard shortcuts
- Navigate around media elements with arrow keys
- Avoid accidentally editing media element attributes
The wrapper is transparent to the end user and automatically removed when saving content.
media
media(editor): void
Process video and audio
Parameters
| Name | Type | 
|---|---|
| editor | IJodit | 
Returns
void
Defined in
jodit/src/plugins/media/media.ts:23