在TinyMCE iframe中加载jQuery文件

Question

I'm trying to run my site's script.js main javascript file inside my tinyMCE instance. The idea is to have functionality, such as my sites slideshow, also running inside tinyMCE for optimal realistic editing.

I'm not even sure this is possible how I intend it.

Here's the function I use to initialize:

function set_html_tinymce() {
    tinymce.init({
        selector:'#edit_html_textarea',
        ... ...
    });

    // LOAD jQUERY AND SCRIPT.JS INSIDE TINYMCE
    var scriptLoader = new tinymce.dom.ScriptLoader();
    scriptLoader.add('http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
    scriptLoader.add('../js/script.js');
    scriptLoader.loadQueue(function() {
       alert('All scripts are now loaded.');
    });
}

Here's the contents of my test script.js :

$( document ).ready(function() {

    alert('a');

    $('.slideshow').on('click', function() {
        alert('b');
    });

    $('.slideshow').click(function() {
        alert('c');
    });

});

I get the first alert a and All scripts are now loaded. , so the script.js is indeed loaded. However when I click on a .slideshow class div inside tinyMCE I get neither b nor c alert.

How can I load and run a jQuery/JS file inside tinyMCE, and have it execute in the same manner it would on the site itself?

I would love an officially supported solution but if this isn't possible I will settle for a 'hack'.

Answer 1

the problem is that TinyMCE uses designMode, so in order to add a js file to the iframe, you must first turn off designMode.

This solution worked for me:

var editor = $(tinymce.activeEditor.getBody())[0];
var iframe = $R('txtTinyMCE_ifr');

editor.designMode = 'off';

var script = iframe.contentDocument.createElement('script');
script.setAttribute('src', '../../scripts/tinymce/iframe.js');
editor.appendChild(script);

editor.designMode = 'on';

You should add this code to the init_instance_callback function for TinyMCE.