在TinyMCE iframe中加载jQuery文件

Question

我正在尝试在我的tinyMCE实例中运行网站的script.js主javascript文件。 这个想法是为了使功能（例如我的网站幻灯片）也可以在tinyMCE内运行，以实现最佳的逼真编辑。

我什至不确定这是否可能是我的打算。

这是我用来初始化的函数：

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.');
    });
}

这是我的测试script.js的内容：

$( document ).ready(function() {

    alert('a');

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

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

});

我收到第一个警报a 并且 All scripts are now loaded. ，因此script.js确实已加载。 但是，当我在tinyMCE中单击.slideshow类div ，我既不会收到b警报，也不会收到c警报。

如何在tinyMCE中加载和运行jQuery / JS文件，并使其以与站点本身相同的方式执行？

我希望有一个官方支持的解决方案，但是如果这不可能，我将接受“ hack”。

Answer 1

问题在于TinyMCE使用了designMode，因此，要将js文件添加到iframe中，您必须先关闭designMode。

此解决方案为我工作：

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';

您应该将此代码添加到TinyMCE的init_instance_callback函数中。