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: