TinyMCE is an iFrame element with full HTML content.

Sometime we would like to add in Bootstrap & jQuery or any plugins into it. Let's see how we achieve it.

1
2
3
tinymce.init({
selector: '.tinymce',
});

Above is the basic setup. To add in Bootstrap stylesheet, just add in content_css option

1
2
3
4
content_css: [
'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css',
'/css/custom-mce.css', // if you want to add in custom styles
],

What about JavaScript? We can make use of init_instance_callback option

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
init_instance_callback: function(editor) {
// get the head element
let head = editor.dom.select('head')[0];

// just add in whatever plugins needed
addScript('https://code.jquery.com/jquery-3.3.1.min.js');

// this is needed, without the delay, it will show jQuery is not defined
setTimeout(function () {
addScript('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js');
addScript('/path/to/your/script.js');
}, 500);

// helper function
function addScript (scriptUrl) {
editor.dom.add(
head,
'script',
{
src: scriptUrl,
type: 'text/javascript'
}
);
}
}

References: