Media plugin
Add HTML5 video and audio elements.
Contribute to this pageThe media
plugin adds the ability for users to be able to add HTML5 video and audio elements to the editable area. It also adds the item Insert/edit video
under the Insert
menu as well as a toolbar button.
Basic setup
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
menubar: 'insert',
toolbar: 'media'
});
Options
These settings affect the execution of the media
plugin. Namely the ability to disable parts of the media dialog box when inserting/editing media items. In addition, the user may disable the cross-site scripting sanitation filter for video/object elements here.
audio_template_callback
This option allows you to specify the function that will return the HTML embed code of the audio media that you are attempting to insert into TinyMCE.
Type: String
Example: Using audio_template_callback
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
menubar: 'insert',
toolbar: 'media',
audio_template_callback: function(data) {
return '<audio controls>' + '\n<source src="' + data.source + '"' + (data.sourcemime ? ' type="' + data.sourcemime + '"' : '') + ' />\n' + (data.altsource ? '<source src="' + data.altsource + '"' + (data.altsourcemime ? ' type="' + data.altsourcemime + '"' : '') + ' />\n' : '') + '</audio>';
}
});
media_alt_source
This options allows you disable the Alternative source
input field in the media dialog.
Type: Boolean
Default Value: true
Possible Values: true
, false
Example: Using media_alt_source
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
menubar: 'insert',
toolbar: 'media',
media_alt_source: false
});
media_dimensions
This options allows you disable the Dimensions
input fields in the media dialog.
Type: Boolean
Default Value: true
Possible Values: true
, false
Example: Using media_dimensions
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
menubar: 'insert',
toolbar: 'media',
media_dimensions: false
});
media_filter_html
This option allows you disable the XSS sanitation filter for video/object elements. Scripts, conditional comments, etc, can’t be used within these elements by default for security reasons. If you want to include that and have server side sanitizers or if you trust your users, then you can disable this feature.
Type: Boolean
Default Value: true
Possible Values: true
, false
Example: Using media_filter_html
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
menubar: 'insert',
toolbar: 'media',
media_filter_html: false
});
media_live_embeds
When you enable this option users will see a live preview of embedded video content within the editable area, rather than a placeholder image. This means that users can play a video clip, such as YouTube, within the editor.
This option is enabled by default and accepts URLs input into the source field or embed field in the dialog box by the user.
Type: Boolean
Default Value: true
Possible Values: true
, false
Example: Using media_live_embeds
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
menubar: 'insert',
toolbar: 'media',
media_live_embeds: true
});
media_poster
To remove the Poster
input field in the media dialog, set this option to false
.
Type: Boolean
Default Value: true
Possible Values: true
, false
Example: Using media_poster
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
menubar: 'insert',
toolbar: 'media',
media_poster: false
});
media_scripts
Important: This option has been deprecated in TinyMCE 5.10 and will be removed in TinyMCE 6.0.
This option allows you to embed videos using script elements.
Type: Array
Example: Using media_scripts
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
menubar: 'insert',
toolbar: 'media',
media_scripts: [
{filter: 'http://media1.example.com'},
{filter: 'http://media2.example.com', width: 100, height: 200}
]
});
media_url_resolver
This option allows you to specify a function that will be used to replace TinyMCE’s default media embed logic with your own, custom logic.
The media url resolver function takes three arguments: data
, a resolve
callback and a reject
callback. The data
argument will be an object with a url
property on it. In your custom handler function you can then handle the url
in whatever way you want and return the HTML you want to embed by calling the resolve
callback and passing it an object with the HTML set on the html
property, like this: resolve({html: 'YOUR_HTML'})
.
If you in your handler would like fall back to the default media embed logic you can simple call the resolve
callback with an object where the html
property is set to an empty string, like this: resolve({html: ''})
.
If something goes wrong in your function and you want to show an error to the user you can do so by calling the reject
callback with an object where the message you want to show the user is set under the msg
property, like this: reject({msg: 'YOUR_ERROR_MESSAGE'})
. The message entered will be shown in an error notification to the user.
Type: Function
Example: Using media_url_resolver
The following example simply checks if the url contains some special url and returns an iframe if it does. Otherwise it calls the resolve
callback with an empty string, falling back to the default media embed logic.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
toolbar: 'media',
media_url_resolver: function (data, resolve/*, reject*/) {
if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
var embedHtml = '<iframe src="' + data.url +
'" width="400" height="400" ></iframe>';
resolve({html: embedHtml});
} else {
resolve({html: ''});
}
}
});
video_template_callback
This option allows you to specify the function that will return the HTML embed code of the video media that you are attempting to insert into TinyMCE.
Type: String
Example: Using video_template_callback
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
menubar: 'insert',
toolbar: 'media',
video_template_callback: function(data) {
return '<video width="' + data.width + '" height="' + data.height + '"' + (data.poster ? ' poster="' + data.poster + '"' : '') + ' controls="controls">\n' + '<source src="' + data.source + '"' + (data.sourcemime ? ' type="' + data.sourcemime + '"' : '') + ' />\n' + (data.altsource ? '<source src="' + data.altsource + '"' + (data.altsourcemime ? ' type="' + data.altsourcemime + '"' : '') + ' />\n' : '') + '</video>';
}
});
Toolbar buttons
The Media plugin provides the following toolbar buttons:
Toolbar button identifier | Description |
---|---|
media | Creates/Edits embedded media elements. |
These toolbar buttons can be added to the editor using:
- The
toolbar
configuration option. - The
quickbars_insert_toolbar
configuration option. - Custom Context toolbars.
Menu items
The Media plugin provides the following menu items:
Menu item identifier | Default Menu Location | Description |
---|---|---|
media | Insert | Opens the media dialog. |
These menu items can be added to the editor using:
- The
menu
configuration option. - The
contextmenu
configuration option. - Custom Menu toolbar buttons.
Commands
The Media plugin provides the following JavaScript command.
Command | Description |
---|---|
mceMedia | Opens the insert/edit media dialog. |
Example
tinymce.activeEditor.execCommand('mceMedia');
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.